Color Picker

This color picker converts any color between HEX, RGB and HSL, shows its OKLCH value, builds a scale of tints and shades, and checks text and background pairs against WCAG contrast requirements. Pick a color or type a value in any format to get started.

HEX

RGB

HSL

Type in any field, or click the swatch to use your system color picker. OKLCH is shown read-only.

#0a5cff

HEX#0a5cff
RGBrgb(10, 92, 255)
HSLhsl(220, 100%, 52%)
OKLCHoklch(54.6% 0.251 262.4)

Tints and shades

Mixed with white and black. Click a swatch to copy its HEX code.

WCAG contrast checker

Check text and background colors against WCAG 2.2.

Text color

Background color

Contrast ratio

19.60:1

Large text sample

Normal body text at 16 pixels. The quick brown fox jumps over the lazy dog.

Small text at 14 pixels is harder to read at low contrast.

Normal text · AA: needs 4.5:1Pass
Normal text · AAA: needs 7:1Pass
Large text · AA: needs 3:1Pass
Large text · AAA: needs 4.5:1Pass
UI components and icons · AA: needs 3:1Pass

Large text means at least 24 px regular or 18.66 px bold (18 pt / 14 pt). Ratios are rounded down, so a pass is never overstated.

How to use the Color Picker

1Click the swatch to open your system color picker, or type a HEX, RGB or HSL value.
2Copy the converted value you need, including the OKLCH form for modern CSS.
3Click any tint or shade to copy its HEX code for hover states, borders and backgrounds.
4In the contrast checker, set a text and a background color and check the AA and AAA results.

HEX, RGB, HSL and OKLCH explained

HEX and RGB describe the same thing: how much red, green and blue light make up a color on screen, each from 0 to 255. A HEX code simply writes those three numbers in base 16, so #0A5CFF is red 10, green 92 and blue 255. RGB is easier to read; HEX is shorter and common in design tools.

HSL describes a color by hue (an angle on the color wheel), saturation and lightness, which makes it easier to adjust by hand. Its weakness is that equal lightness values do not look equally light: a yellow and a blue at 50% lightness appear very different. OKLCH fixes that. It is a perceptual model, so changing lightness or chroma gives predictable, even results across hues, which is why it is increasingly used for design tokens and palettes. All current major browsers support oklch() in CSS.

WCAG contrast requirements

The Web Content Accessibility Guidelines measure contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). At level AA, normal text needs at least 4.5:1 and large text at least 3:1. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Large text means at least 18 point (24 CSS pixels) or 14 point bold (about 18.66 pixels).

Non-text elements count too: under WCAG 2.1 and 2.2, the visible parts of buttons, form fields, focus indicators and meaningful icons need 3:1 against their surroundings. Logos and purely decorative elements are exempt. Thresholds are hard limits, so a ratio of 4.49:1 fails AA for body text even though it rounds to 4.5.

Building tints and shades

A tint is a color mixed with white; a shade is mixed with black. A scale of both gives you a consistent family for hover and pressed states, subtle backgrounds, borders and dark text that still feels on brand, without inventing new colors each time.

This tool mixes in the sRGB space, which is simple and predictable and matches how many design tools work. Mid-tones from an sRGB mix can look a little dull or shift slightly in hue, so if you are building a full design system, consider generating steps in OKLCH for more even perceived lightness. Whichever method you use, check each text and background pair you actually ship: a brand color that passes on white may fail on its own lighter tint.

Branding & Logo Design

Need a full palette, not just one color? Devma designs logos, color and type systems that stay accessible on every screen.

Learn more

Questions? Answers.

How do I convert HEX to RGB?

Split the six-digit code into three pairs and convert each pair from base 16 to decimal. For #0A5CFF, 0A is 10, 5C is 92 and FF is 255, giving rgb(10, 92, 255). Type a HEX code into this tool to convert it instantly.

What contrast ratio do I need for WCAG AA?

4.5:1 for normal text, and 3:1 for large text and for user interface components such as buttons, inputs and icons. AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text in WCAG?

Text that is at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.66 CSS pixels) when bold. Everything smaller must meet the normal text ratio.

Why does my bright brand color fail contrast with white text?

Bright colors such as yellow, cyan and light green have high luminance, so there is little difference between them and white. Use a darker shade of the color for text and buttons, or put dark text on the bright color instead.

Can I use OKLCH colors in CSS?

Yes. The oklch() function works in all current versions of Chrome, Edge, Firefox and Safari. If you need to support much older browsers, declare a HEX or RGB fallback before the OKLCH value.

More free tools

All free tools →

Abstract blue swirling shapes with light reflections

Ready to grow?

Let’s build a solution that’s built for your business. Whether you’re starting fresh or scaling fast, we’re here to help you go further, faster.

Get a free proposal WhatsApp us