A color, ready for your CSS

Color Picker

Pick a color, fine-tune its channels and opacity, then copy the format you need. See how your color reads as text on a solid background.

Choose your color

HEX, rgb(), rgba(), hsl(), hsla(), or transparent. Example: rgb(232 111 102 / 50%).

Choose the base color. Your opacity stays the same.

RGB channels · 0–255
HSL channels
Transparency

0% is fully transparent; 100% is fully opaque.

Preview & copy

#E86F66100% opacity

CSS values show up to six decimal places. HEX uses whole 8-bit channels.

Try it as text

Your selected color is the foreground. Choose an opaque background to see how transparency affects readability.

Selected text color on #FFFFFF

— : 1

Normal text · AA ≥ 4.5Awaiting calculation
Normal text · AAA ≥ 7Awaiting calculation
Large text · AA ≥ 3Awaiting calculation
Large text · AAA ≥ 4.5Awaiting calculation

Large text means at least 18pt regular or 14pt bold. Decisions use the unrounded ratio. This checks one text/background pair, not an entire page.

How to use the color picker

  1. Paste a color and choose Apply color, open the visual picker, or adjust the RGB and HSL controls. Sliders update the preview immediately; number fields accept decimals.
  2. Set opacity to add transparency. The checkerboard makes transparent areas visible. Try a solid background below to see the actual text contrast.
  3. Copy the CSS format you need, or download a stylesheet containing --picked-color. Use it in your CSS as color: var(--picked-color);. Reset restores the starting color and background.

Choose the right format

HEX is compact, RGB edits the red, green and blue channels, and HSL edits hue, saturation and lightness. They describe the same sRGB color. A six-digit HEX code has no transparency. Eight-digit HEX adds an alpha byte at the end: #RRGGBBAA. The RGB, HSL, RGBA and custom-property outputs retain opacity.

HEX can only store whole channel values from 0 to 255. Decimal RGB and HSL inputs can fall between those values. This picker retains decimal values internally and rounds CSS output to at most six decimal places; HEX is the nearest 8-bit approximation. An alpha of 0.5 rounds to 80 in HEX, which decodes to 128/255, about 50.196078% opacity. Use RGB or HSL when that difference matters.

Which input formats are supported?

Use 3, 4, 6 or 8 hex digits, with or without #; comma notation such as rgba(232, 111, 102, 0.5); or modern notation such as rgb(232 111 102 / 50%) and hsl(4.15 73.86% 65.49% / 0.5). RGB accepts numbers from 0–255 or percentages from 0–100%. Modern RGB can mix these units; comma RGB must use the same unit for all three channels.

HSL hue accepts degrees (including unitless degrees), deg, turn, rad and grad, and wraps around the color wheel. Saturation and lightness accept 0–100% (or unitless numbers in modern notation). Alpha accepts 0–1 or 0–100%. The keyword transparent is transparent black. Other named colors, none, var(), calc(), relative colors and wide-gamut formats are not supported. For predictable editing, out-of-range channels are rejected rather than silently clamped as CSS may do.

What do the contrast results mean?

The tool composites transparent text over your opaque background, then calculates the WCAG 2.2 contrast ratio using sRGB relative luminance. AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Pass/fail uses the full calculation, even if a displayed ratio rounds to a threshold. Actual typography, images behind text, blend modes, gradients and inherited opacity can change the result.

HSL lightness is not WCAG relative luminance. Two colors with the same HSL lightness can have very different text contrast. See the WCAG contrast guidance and CSS Color specification for the underlying definitions.

Privacy and practical limitations

Color conversion runs in your browser. This tool does not upload, save or send your color entries, and the CSS download is created locally. Reloading the page resets your work. The site’s shared analytics is separate from the color calculations. No screen capture or image upload is needed; the visual picker is your browser’s own color control, whose appearance varies by device.

Colors are interpreted as sRGB. This tool does not provide print-profile conversion, calibrated monitor matching, image sampling or multi-color palette generation. Browser and display settings can affect how a swatch looks. Clipboard access may be unavailable in some environments; a manual-copy field is provided.