A practical color workbench
HTML Color Codes
Pick a color, convert its code, and see how it reads on your background. Explore variations and collect up to 12 colors for a ready-to-use CSS palette.
Text contrast
WCAG 2.2 thresholds use the unrounded ratio. Large text means at least 24px regular or about 18.67px bold. This checks a color pair, not whole-page accessibility.
Try a neutral text color
Your color codes
HEX rounds channels and alpha to 8 bits. RGB/HSL codes use up to 6 decimal places. Contrast uses full internal precision.
Use in CSS
Explore variations
Select a swatch to load it as your foreground. Suggestions are opaque; harmonies rotate HSL hue and mixes add white or black in sRGB. They are starting points, not guaranteed accessible pairs.
Color harmonies
Tints and shades
Your CSS palette
0 of 12 colors. Add a converted color to start.
This palette lives in this tab's memory. Reset, reload or closing the page removes it. Download it to keep a copy.
Copy text
Select the text below and use your device's copy command.
Find a CSS color name
How to use HTML color codes
- Enter a foreground color and an opaque background, or use the visual pickers.
- Select Convert & check contrast to get HEX, RGB and HSL values plus text contrast results.
- Copy a code, try a variation, or add the color to your palette. Export the palette as CSS custom properties.
“HTML color codes” usually means CSS color values used to style HTML. For example, color: #203f5e; sets text color and background-color: #fffaf7; sets its background. A name such as rebeccapurple is equivalent to #663399.
Which formats can I enter?
| Format | Example |
|---|---|
| HEX, with or without # | #639, #66339980 |
| CSS name | rebeccapurple, transparent |
| RGB / RGBA | rgb(102 51 153 / 50%) |
| HSL / HSLA | hsl(270, 50%, 40%) |
HEX accepts 3, 4, 6 or 8 digits; alpha comes last. RGB channels must be 0–255 or 0–100%. HSL saturation and lightness require percentages from 0–100%; hue accepts degrees, turns, radians and gradians, and wraps around the color wheel. Alpha must be 0–1 or 0–100%. Names are case-insensitive, including gray/grey aliases.
Both comma-separated and modern space-separated functions work. Use a slash before alpha in space syntax. Do not mix separators. This focused converter rejects out-of-range channels instead of silently clamping them as CSS can. It does not parse var(), calc(), currentColor, system colors, none, relative colors, HWB, Lab, OKLCH or wide-gamut values.
Read the result accurately
The color codes describe your foreground, including its alpha. The large swatch and text sample show its appearance on the selected background. A half-transparent black foreground on white appears gray; it does not have the contrast of opaque black. The effective HEX is rounded for display only.
AA text contrast needs at least 4.5:1 for normal text or 3:1 for large text. AAA needs 7:1 or 4.5:1 respectively. A displayed ratio may round to a threshold while still failing, so the pass/fail label uses the original value. Gradients, images, blend modes, overlapping layers, font weight and the surrounding page need separate review. HSL lightness is not perceived brightness, and color harmonies alone do not establish readability.
Privacy and standards
The tool calculates in your browser and makes no requests with your color values. It adds no cookies or persistent storage. The shared site's analytics and privacy policy still apply. Clipboard access happens only after you choose a copy action; no clipboard contents are read. Downloads are generated in your browser.
Color syntax and named values follow CSS Color Level 4 within the supported subset. Contrast follows WCAG 2.2 minimum contrast and enhanced contrast, with source-over alpha compositing against the opaque background. Color appearance can vary between screens.