Skip to content
DevToolbox

Color Converter & Visual Picker

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and CMYK. Pick visually, paste any format, and get instant CSS snippets, color harmonies, tints, shades, and a WCAG contrast check — all entirely in your browser, with nothing sent to a server.

#2443F2

FORMATS

  • HEX
    #2443F2
  • RGB
    rgb(36, 67, 242)
  • RGBA
    rgba(36, 67, 242, 1)
  • HSL
    hsl(231, 89%, 54.6%)
  • HSLA
    hsla(231, 89%, 54.6%, 1)
  • HSV
    hsv(231, 85%, 95%)
  • OKLCH
    oklch(49.85% 0.2584 266.75)
  • CMYK
    cmyk(85%, 72.3%, 0%, 5%)
    Approximate — for accurate print, use ICC-managed software

CSS SNIPPETS

  • background-color: #2443F2;
  • border: 1px solid #2443F2;
  • box-shadow: 0 8px 24px rgba(36, 67, 242, 0.35);
  • color: #2443F2;

CLOSEST NAMED COLOR

royalblue (approximate)
#4169E1 · ΔE≈50.5

WCAG CONTRAST

vs White
6.63:1
AA LargeAA NormalAAA LargeAAA
Contrast ratio 6.63 to one against #FFFFFF
vs Black
3.17:1
AA LargeAA NormalAAA LargeAAA
Contrast ratio 3.17 to one against #000000

COLOR HARMONIES

Complementary
Triadic
Analogous
Split-complementary

TINTS & SHADES

Tints (toward white)
Shades (toward black)

How to use the color converter

Drag inside the gradient pad to set saturation and brightness. Drag the rainbow strip below it to choose a hue. Adjust the alpha slider for transparency. Every format — HEX, RGB, RGBA, HSL, HSLA, HSV, OKLCH, CMYK — updates in real time on the right.

Already have a color in mind? Paste it into the input field. The parser auto-detects #hex, rgb(…), hsl(…), hsv(…), oklch(…), and cmyk(…), and even bare hex digits without a leading #. Hit Enter or click Apply to load it.

Every format row has a one-click Copy button. Below that, ready-to-paste CSS snippets cover the most common use cases: background-color, border, box-shadow, and color.

About HEX

Hexadecimal color notation is shorthand for 24-bit (or 32-bit with alpha) sRGB. A three-digit code like #F0C expands to #FF00CC. An eight-digit code like #6366F1FF includes alpha as the last two characters. HEX is the most common format in design tools, but it is just RGB in another base — the gamut is identical to rgb().

About RGB and RGBA

RGB describes a color by red, green, and blue channels in 0–255. RGBA adds an alpha channel between 0 and 1 for transparency. CSS also accepts the modern space-separated syntax rgb(99 102 241 / 0.5), which the parser here also understands.

About HSL and HSV

HSL splits color into hue (0–360°), saturation (0–100%), and lightness (0–100%). HSV (sometimes called HSB) replaces lightness with value, which is closer to "brightness as you'd see on a screen." Both are convenient for sliders and pickers because hue and chroma feel intuitive — but neither is perceptually uniform. Equal jumps in HSL lightness do not produce equal jumps in perceived brightness.

About OKLCH

OKLCH is the modern default for design systems. It is a polar form of OKLab — a perceptually uniform color space that fixes the long-standing weaknesses of HSL. In OKLCH, two colors at the same L (lightness) actually look like the same brightness, and stepping C (chroma) up or down looks like an even increment. This is why CSS frameworks like Tailwind v4, Radix Colors, and most modern design systems are migrating to OKLCH. Browser support is universal as of 2024.

About CMYK

CMYK (cyan, magenta, yellow, key/black) is a subtractive model used for print. The values shown here are computed from sRGB without an ICC profile, so they are accurate enough as a starting point but should never be used as final values for a print job. Real-world print color requires the destination paper and ink profile, which is managed by tools like Adobe InDesign or Affinity Publisher.

About WCAG contrast

The Web Content Accessibility Guidelines define minimum contrast ratios between text and its background. AA requires 4.5:1 for body text and 3:1 for large text (18 pt or 14 pt bold). AAA tightens those to 7:1 and 4.5:1. The badges in the contrast section show, at a glance, whether your color clears each threshold against pure white and pure black.

Color harmonies, tints, and shades

Harmony helpers rotate the hue around the color wheel to find palettes that work together. Complementary picks the opposite hue (180°). Triadic spaces three colors evenly (120°). Analogous offers two neighbors (±30°). Split-complementary picks the two hues adjacent to the complement (150° and 210°). Tints and shades blend the current color with white and black at 10 steps each — handy for building numeric scales like 50, 100, 200… 900. Click any swatch to load it as the active color.

Frequently asked questions

How do I convert HEX to RGB?

Paste any HEX value (e.g. #6366f1) into the picker. The RGB equivalent appears instantly alongside HSL, HSV, OKLCH, and CMYK. Click Copy on the RGB row to put it on your clipboard.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space adopted in CSS Color Level 4. Equal numeric changes produce equal visual changes, which makes it far better than HSL for picking accessible, evenly spaced palettes. All major browsers now support oklch() in CSS.

How accurate is the CMYK output?

The CMYK values shown are device-independent approximations using the simple subtractive formula. They are useful as a reference but not color-managed. For print production, always use ICC-managed software with the destination paper profile.

What WCAG contrast ratio do I need?

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold). AAA requires 7:1 and 4.5:1 respectively. The contrast checker shows pass/fail badges for all four targets against both white and black backgrounds.

Does this tool send my colors to a server?

No. Every conversion runs entirely in your browser. Nothing is uploaded, logged, or analyzed.

More tools are on the way — the next batch covers text formatters, JSON utilities, and image converters. Follow along on the homepage.