Color Picker (HEX/RGB/CMYK)
Professional-grade color conversion suite. Features interactive HSV canvas, 2-way data binding for RGB/HEX/CMYK/HSL, WCAG contrast checking, color harmonies generator, and automatic standard named color detection.
About
Color precision is paramount in digital interface design and print production. The conversion between additive models (Light: RGB, HEX) and subtractive models (Ink: CMYK) involves complex mathematical approximations due to differing gamuts. This tool acts as a bridge, utilizing rigorous geometric algorithms to map coordinates from the HSVA space (Hue, Saturation, Value, Alpha) to all industry-standard formats instantly.
We specifically address common developer frustrations: lost alpha channels during conversion, rounding errors in CSS percentages, and the lack of visual accessibility feedback. By calculating the Relative Luminance (L) of the selected color in real-time, this application automatically suggests whether to use dark or light foreground text to satisfy WCAG 2.1 contrast ratios (AAA/AA standards), preventing common accessibility violations before they enter production code.
Formulas
Color conversion logic relies on normalizing standard 0-255 RGB integers to a 0-1 continuous range. Below are the critical formulas used for translation and luminance validation.
RGB to CMYK (Key Black Extraction)
First, normalized RGB values (r', g', b') are used to find the Key (Black) component.
Then, calculate Cyan, Magenta, and Yellow, handling the singularity where K = 1.
Relative Luminance (Accessibility)
Standard WCAG definition for perceivable brightness. Gamma correction is applied to RGB components first.
Reference Data
| CSS Name | HEX | RGB (r,g,b) | HSL (h,s,l) |
|---|---|---|---|
| Crimson | #DC143C | 220, 20, 60 | 348, 83%, 47% |
| CornflowerBlue | #6495ED | 100, 149, 237 | 219, 79%, 66% |
| DarkOliveGreen | #556B2F | 85, 107, 47 | 82, 39%, 30% |
| GoldenRod | #DAA520 | 218, 165, 32 | 43, 74%, 49% |
| LightSalmon | #FFA07A | 255, 160, 122 | 17, 100%, 74% |
| MidnightBlue | #191970 | 25, 25, 112 | 240, 64%, 27% |
| SeaGreen | #2E8B57 | 46, 139, 87 | 146, 50%, 36% |
| SlateGray | #708090 | 112, 128, 144 | 210, 13%, 50% |
| Tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| Rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
| Teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| Fuchsia | #FF00FF | 255, 0, 255 | 300, 100%, 50% |
| Lime | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Maroon | #800000 | 128, 0, 0 | 0, 100%, 25% |
| Aquamarine | #7FFFD4 | 127, 255, 212 | 160, 100%, 75% |