日本語English

Color Converter, Contrast Checker & Palettes (Color Studio)

Type one color and see it in HEX, RGB, HSL, HWB, OKLCH and approximate CMYK. Check WCAG contrast against a background (AA/AAA), generate complementary or triadic schemes and a 50–950 OKLCH scale, preview how a palette looks with color-vision deficiency, and export CSS variables or Tailwind config. Nothing leaves your device.

On-device・No upload

Your files and input are processed only inside your browser on this device and are never uploaded to our servers.

HEX, rgb(), hsl(), hwb(), oklch(), cmyk() or a color name. Alpha (transparency) is not supported.

Convert≈ dodgerblue
HEX#3b82f6
RGBrgb(59 130 246)
HSLhsl(217 91% 60%)
HWBhwb(217 23% 4%)
OKLCHoklch(62.3% 0.188 259.8)
CMYK (approx.)cmyk(76% 47% 0% 4%)

CMYK is a naive approximation without an ICC profile. Do not use it for print color matching.

Nearest CSS color name
dodgerblue
Lightness L
62.3%
Chroma C
0.188
Hue h
259.8°

How to use

  1. Type a color in the input at the top: #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch(62% 0.19 260), cmyk(76% 47% 0% 4%) or a name like royalblue. You can also use the color picker or, where supported, the eyedropper.

  2. Open the Convert tab to see every format and copy any of them. The nearest CSS color name is shown too.

  3. Open the Contrast tab and set a background. You get WCAG results for normal text, large text and UI components, plus APCA Lc. When a pair fails, the tool suggests the closest text color that passes while keeping the hue.

  4. Open the Palette tab to build a scheme (complementary, analogous, triadic and more), a 50–950 OKLCH scale and tints/shades. Click a swatch to copy it, or export as CSS variables, JSON or Tailwind.

  5. Open the Vision tab to see how a list of colors looks with protanopia, deuteranopia, tritanopia and achromatopsia, and which pairs become hard to tell apart.

What it does

Six input formats, instant conversion

Enter HEX (3 or 6 digits), rgb(), hsl(), hwb(), oklch(), cmyk() or one of the 148 CSS color names, and copy any other format. Alpha (transparency) is not supported.

WCAG 2.x and APCA side by side

Contrast ratios come from relative luminance and are never rounded up to pass: 4.499 is shown as 4.49 and fails 4.5:1. APCA Lc (W3 0.0.98G-4g constants) is shown as a reference value.

Schemes and scales in OKLCH

Hue rotation and lightness steps happen in perceptually uniform OKLCH, so a yellow and a blue of the same step look comparably bright. Colors outside sRGB are mapped in by lowering chroma while keeping lightness and hue.

Experience color-vision differences

The Machado et al. (2009) matrices are applied in linear RGB for protanopia, deuteranopia, tritanopia (full severity) and achromatopsia. Pairs that end up closer than 0.04 in OKLab are listed as hard to distinguish.

Four export formats

CSS custom properties, JSON, Tailwind v4 @theme and a Tailwind v3 config object. Name the palette, then copy it or save it as a file.

Use cases

  • Turn a color from a design mock-up into HEX, HSL or OKLCH for CSS
  • Check that button or body text colors meet WCAG 2.x AA
  • Create a 50–950 color scale for Tailwind from a brand color
  • Check in advance whether chart series colors are distinguishable with color-vision deficiency
  • Pick a color anywhere on screen with the eyedropper and copy it as code

Capability matrix

FeatureSupportNotes
HEX / RGB / HSL / HWB / OKLCH conversionSupportedCSS syntax, comma or space separated
CMYK conversionPartialNaive approximation without an ICC profile; not for print color matching
CSS named colors (148)SupportedAlso shows the nearest name
WCAG 2.x contrast checksSupportedNormal text, large text and UI components (AA/AAA)
APCA LcPartialReference only; WCAG 3 is still a draft and APCA is not a conformance criterion
Color-vision simulationPartialFull-severity approximation models; cannot reproduce individual or mild differences
Eyedropper for on-screen colorsPartialOnly in browsers with the EyeDropper API (Chrome, Edge, etc.); not Firefox or Safari
Alpha, Display P3, LAB/LCH and other non-sRGB spacesNot supportedsRGB only for input and output; values with transparency are rejected
Extracting colors from an imageNot supportedImage import is not supported (the eyedropper can pick on-screen colors)
Offline useSupportedWorks without a connection once loaded

Limits & notes

  • Only sRGB colors are supported; alpha values (rgba() or #rrggbbaa) are rejected.
  • The color vision list accepts up to 24 colors.
  • OKLCH output is rounded to 1–3 decimals, so converting a saturated blue back can differ by a few 8-bit steps.
  • CMYK is an approximation and does not guarantee printed color.

Privacy & safety

Colors you enter and the exports you create are processed only in your browser and are never sent anywhere. Colors picked with the eyedropper stay in the browser as well.

FAQ

How do I convert HEX to HSL or OKLCH?
Type a HEX such as #3b82f6 in the input. The Convert tab lists RGB, HSL, HWB, OKLCH and CMYK together, each with a copy button.
What contrast ratio do WCAG AA and AAA need?
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (about 24px, or 18.66px bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphics need 3:1. This tool never rounds a failing value up to pass.
Can APCA Lc replace WCAG contrast?
No. APCA is an approach being explored for WCAG 3 (a draft). It is not a conformance criterion for WCAG 2.x, so this tool shows it only as a supplementary reference.
Why build palettes in OKLCH?
OKLCH separates lightness, chroma and hue in a way that is close to perception, so rotating the hue keeps lightness steady and steps like 50–950 look even. In HSL, yellow looks much brighter than blue at the same lightness value.
Why is the eyedropper missing?
The EyeDropper API that reads on-screen colors is only available in some browsers such as Chrome and Edge. In Firefox and Safari, use the color picker or type a value.

Related tools

Icon Generator

From one image (or a letter or emoji), get favicon.ico, apple-touch-icon, Android/PWA icons, a maskable icon and an OGP image, plus the manifest and the <head> code to paste. Check blur at real size first — nothing leaves your browser.

Batch Image Resizer

Drop a batch of images and resize them by width, longest edge, box crop and more. Make several sizes (say 320, 640 and 1280) from each image in one go, then copy ready-made srcset HTML. Your images are never uploaded.

Image Compressor

Drop images to shrink them in bulk while keeping them sharp. Convert to WebP or AVIF, resize, and compare before and after. Your images are never uploaded.

Image Converter

Choose the target format first, then drop images to convert them in bulk. Tune quality per format, use lossless WebP, set a background for transparency and name the output files — nothing is uploaded.

Crop, Pad & Canvas

Drag to crop, then rotate, straighten and add padding on one screen. Export straight to the recommended X header or Instagram size. Your image is never uploaded.

Image Editor

Annotate a screenshot or photo, reliably hide what must not be seen, tune the colours and export — on one screen. Made for how-to guides, bug reports and social posts. Your image is never uploaded and exports carry no metadata.

Last updated: