tooldura

All tools
Developer Tools

Color Picker & Converter

Pick a color and read it back as HEX, RGB, HSL, HSV, CMYK or OKLCH

#835ddd

Paste hex, rgb, hsl, hsv, cmyk, oklch or a CSS color name. The picker follows whatever you type.

Every format
HEX#835ddd
RGBrgb(131, 93, 221)
HSLhsl(258, 65%, 62%)
HSVhsv(258, 58%, 87%)
CMYKcmyk(41%, 58%, 0%, 13%)
OKLCHoklch(58.2% 0.187 293.4)
Namemediumslatebluenearest CSS color
Text contrast
White text on this color
4.59:1contrast ratio
Pass AAFail AAAPass AA Large
Black text on this color
4.57:1contrast ratio
Pass AAFail AAAPass AA Large

WCAG 2.1 wants 4.5:1 for body text and 3:1 from 18.66px bold or 24px regular upwards.

Tints and shades

Lightness steps at a fixed hue and chroma, ready to paste into a @theme block. The marked swatch is where the current color lands.

Color harmony

Related Tools

JJSON FormatterBBase64 Encoder/DecoderUURL Encoder/DecoderMMarkdown to HTML Converter

About Color Picker & Converter

The Color Picker is one color held in seven notations at once. Drag the saturation square or the hue and opacity tracks, or type a value in any format the web understands, and every other reading updates with it: HEX, RGB, HSL, HSV, CMYK, OKLCH and the closest CSS color name. Underneath sit the two questions a color usually raises next. The contrast panel scores white and black text on it against WCAG 2.1, so you find out before shipping whether your brand color can carry body text. The tint scale builds eleven steps at a fixed hue and chroma, spaced by OKLCH lightness rather than HSL, which is why the dark end keeps its color instead of sliding into mud.

✦FreeNo paywalls or tiers
⬡No SignupNothing to create
⚡InstantNo setup, no install
⊞Any DeviceMobile, tablet, desktop

The guide behind this tool

Why HSL Says Yellow and Blue Are Equally Light

Two colors, both hsl 50% lightness, eight to one apart in contrast. Where the sRGB gamma curve hides the difference, and how OKLCH puts it back.

7 min read

How to use Color Picker & Converter

  1. 1

    Drag inside the square to set saturation and brightness, and the track below it to set the hue.

  2. 2

    Or paste a value you already have: #4ade80, rgb(74 222 128), hsl(142 69% 58%), oklch(80% 0.18 152) and names like rebeccapurple all read the same.

  3. 3

    Drop the opacity track below 100% if you need an alpha channel, which then appears in the HEX, RGB, HSL and OKLCH readings.

  4. 4

    Copy the notation you need from the format list, or take all seven at once from the button above it.

  5. 5

    Check the contrast panel if text is going on top, then click a tint or a harmony swatch to move the picker onto that color.

Frequently Asked Questions

Hex in three, four, six or eight digits, with or without the #; rgb() and rgba() in both the comma form and the modern space form, with numbers or percentages; hsl() and hsla(); hsv() or hsb(); cmyk(); oklch() with lightness as either 0-1 or a percentage; any of the 148 CSS color names; and the keyword transparent. The picker follows whatever you type as you type it, so a value that lands is applied without pressing anything.