🔍 /

HEX Color Picker

Advanced color command center featuring EyeDropper integration, WCAG accessibility scoring, automatic harmony generation, and real-time RGB/HSL/CMYK conversion.

User Rating 0.0 ★★★★★
Total Usage 0 times
Category CSS Tools
Values
#
Accessibility Audit (WCAG)
White Text
- -
Black Text
- -
Harmony Engine
Color Copied!
Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Color selection is not merely aesthetic; it is a rigid engineering constraint in web development. Precision in chromatic values ensures brand consistency across varied displays and viewports. More critically, the Web Content Accessibility Guidelines (WCAG) mandate specific contrast ratios between foreground text and background colors to ensure readability for visually impaired users. Failing to meet these standards results in inaccessible digital products and potential legal liabilities.

This tool functions as a complete chromatic command center. It bypasses standard operating system pickers to provide direct access to the raw data channels of color: Hue, Saturation, Lightness, and Alpha. It integrates algorithmic harmony engines to calculate complementary and analogous relationships mathematically, rather than intuitively. Furthermore, it incorporates a real-time accessibility auditor, validating your selection against WCAG 2.1 Level AA and AAA standards instantly.

color design css accessibility converter

Formulas

Accurate digital color reproduction relies on transformations between coordinate systems. The contrast ratio, vital for accessibility, is derived from relative luminance.

1. Relative Luminance (L)

For sRGB colors, the spectral channels (R, G, B) are first linearized:

{
Clin = Csrgb12.92 if Csrgb ≤ 0.04045Clin = (Csrgb + 0.055)1.0552.4 otherwise

Then, luminance is calculated using human perception coefficients:

L = 0.2126R + 0.7152G + 0.0722B

2. WCAG Contrast Ratio

Ratio = L1 + 0.05L2 + 0.05

Where L1 is the luminance of the lighter color and L2 is the darker.

Reference Data

Color NameHEXRGBHSLLuminance (Y)
AliceBlue#F0F8FF240, 248, 255208°, 100%, 97%0.92
AntiqueWhite#FAEBD7250, 235, 21534°, 78%, 91%0.86
Aqua#00FFFF0, 255, 255180°, 100%, 50%0.78
Aquamarine#7FFFD4127, 255, 212160°, 100%, 75%0.80
Azure#F0FFFF240, 255, 255180°, 100%, 97%0.97
Beige#F5F5DC245, 245, 22060°, 56%, 91%0.89
Bisque#FFE4C4255, 228, 19633°, 100%, 88%0.80
Black#0000000, 0, 00°, 0%, 0%0.00
BlanchedAlmond#FFEBCD255, 235, 20536°, 100%, 90%0.85
Blue#0000FF0, 0, 255240°, 100%, 50%0.07
BlueViolet#8A2BE2138, 43, 226271°, 76%, 53%0.12
Brown#A52A2A165, 42, 420°, 59%, 41%0.10
BurlyWood#DEB887222, 184, 13534°, 57%, 70%0.51
CadetBlue#5F9EA095, 158, 160182°, 25%, 50%0.29
Chartreuse#7FFF00127, 255, 090°, 100%, 50%0.76
Chocolate#D2691E210, 105, 3025°, 75%, 47%0.24
Coral#FF7F50255, 127, 8016°, 100%, 66%0.37
CornflowerBlue#6495ED100, 149, 237219°, 79%, 66%0.31
Cornsilk#FFF8DC255, 248, 22048°, 100%, 93%0.94
Crimson#DC143C220, 20, 60348°, 83%, 47%0.16
Cyan#00FFFF0, 255, 255180°, 100%, 50%0.78
DarkBlue#00008B0, 0, 139240°, 100%, 27%0.01
DarkCyan#008B8B0, 139, 139180°, 100%, 27%0.20
DarkGoldenRod#B8860B184, 134, 1143°, 89%, 38%0.27
DarkGray#A9A9A9169, 169, 1690°, 0%, 66%0.39
DarkGreen#0064000, 100, 0120°, 100%, 20%0.09
DarkKhaki#BDB76B189, 183, 10756°, 38%, 58%0.45
DarkMagenta#8B008B139, 0, 139300°, 100%, 27%0.08
DarkOliveGreen#556B2F85, 107, 4782°, 39%, 30%0.12
DarkOrange#FF8C00255, 140, 033°, 100%, 50%0.38
DarkOrchid#9932CC153, 50, 204280°, 61%, 50%0.13
DarkRed#8B0000139, 0, 00°, 100%, 27%0.05
DarkSalmon#E9967A233, 150, 12215°, 72%, 70%0.40
DarkSeaGreen#8FBC8F143, 188, 143120°, 25%, 65%0.44
DarkSlateBlue#483D8B72, 61, 139248°, 39%, 39%0.06
DarkSlateGray#2F4F4F47, 79, 79180°, 25%, 25%0.06
DarkTurquoise#00CED10, 206, 209181°, 100%, 41%0.48
DarkViolet#9400D3148, 0, 211282°, 100%, 41%0.10
DeepPink#FF1493255, 20, 147328°, 100%, 54%0.23
DeepSkyBlue#00BFFF0, 191, 255195°, 100%, 50%0.44
DimGray#696969105, 105, 1050°, 0%, 41%0.14
DodgerBlue#1E90FF30, 144, 255210°, 100%, 56%0.27
FireBrick#B22222178, 34, 340°, 68%, 42%0.10
FloralWhite#FFFAF0255, 250, 24040°, 100%, 97%0.96
ForestGreen#228B2234, 139, 34120°, 61%, 34%0.19
Fuchsia#FF00FF255, 0, 255300°, 100%, 50%0.28
Gainsboro#DCDCDC220, 220, 2200°, 0%, 86%0.72
GhostWhite#F8F8FF248, 248, 255240°, 100%, 99%0.94
Gold#FFD700255, 215, 051°, 100%, 50%0.68
GoldenRod#DAA520218, 165, 3243°, 74%, 49%0.42
Gray#808080128, 128, 1280°, 0%, 50%0.21
Green#0080000, 128, 0120°, 100%, 25%0.15

Frequently Asked Questions

The EyeDropper API samples the color rendered by the operating system's display profile. If your monitor uses a color profile other than sRGB (like Display P3), or if the browser applies color management, the sampled HEX value may deviate slightly from the source CSS value due to color space mapping.
Both model color as a cylinder, but they differ in lightness. In HSB (Brightness), 100% brightness can still be a pure color (e.g., bright red). In HSL (Lightness), 100% lightness is always pure white. CSS uses HSL standard.
You must check the WCAG contrast ratio. For standard text, a ratio of at least 4.5:1 is required (AA). For large text (18pt+), 3:1 is acceptable. This tool calculates these ratios automatically in the "Accessibility Audit" section.
HEX and RGB are light-based (additive) models for screens. Print uses CMYK (subtractive). While this tool provides a CMYK estimation, physical ink mixing varies by printer calibration. Always rely on a Pantone bridge or physical proofing for professional print work.