Inspect and convert a selected color
Color Details gives you several practical representations of an arbitrary selected color in one place. Enter a HEX value or use the picker to see its nearest named color, conversions, and a small set of related variants.
Understanding a color
The selected HEX color is the source for every value on the page. The tool finds a nearest color name and displays the same color as HEX, RGB, CMYK, and HSL so you can compare representations without changing the underlying selection.
It also generates a complementary color, a grayscale version, and a higher-impact “pop” variation. These are calculated references for exploration, not judgments about which colors must be used together.
Color values and formats
HEX expresses the red, green, and blue channels as hexadecimal pairs. RGB shows those screen-color channels numerically; HSL describes hue, saturation, and lightness; CMYK provides cyan, magenta, yellow, and black percentages commonly used as a planning reference for print workflows.
Copy the representation required by CSS, design software, documentation, or a handoff. Screen-to-print conversion is device and profile dependent, so the displayed CMYK value should not replace a color-managed proof for production printing.
Practical uses for color details
A shared view of the selected color and its conversions makes it easier to verify and reuse a value.
- Translate a supplied HEX color into RGB, HSL, or CMYK values.
- Inspect and document a brand or interface color before reusing it.
- Compare related variants before exploring harmonies or building a UI scale.
- Copy the selected value or export it as CSS, Sass, JavaScript, SVG, or PNG.
Color details and accessibility
This tool does not calculate relative luminance or contrast ratios. Accessibility cannot be established from one color alone: it depends on the foreground and background pair, text size, and the WCAG criterion being evaluated.