🎨 Hex Color Viewer - Preview and Convert Colors

🎨
Examples: | |
👁️
{{ currentColor.hex.toUpperCase() }}
Text contrast examples:
Black text
White text
🔄
{{ currentColor.hex.toUpperCase() }}
{{ `rgb(${currentColor.rgb.r}, ${currentColor.rgb.g}, ${currentColor.rgb.b})` }}
{{ `hsl(${Math.round(currentColor.hsl.h)}, ${Math.round(currentColor.hsl.s)}%, ${Math.round(currentColor.hsl.l)}%)` }}
{{ `hsv(${Math.round(currentColor.hsv.h)}, ${Math.round(currentColor.hsv.s)}%, ${Math.round(currentColor.hsv.v)}%)` }}
{{ `cmyk(${Math.round(currentColor.cmyk.c)}%, ${Math.round(currentColor.cmyk.m)}%, ${Math.round(currentColor.cmyk.y)}%, ${Math.round(currentColor.cmyk.k)}%)` }}
🎭

Monochromatic (Shades & Tints)

{{ color.substring(0, 7) }}

Analogous (Neighboring Hues)

{{ color.substring(0, 7) }}

Complementary (Opposite Hues)

{{ color.substring(0, 7) }}

Triadic (120° Apart)

{{ color.substring(0, 7) }}
🔬
Brightness: {{ Math.round(analysis.brightness) }}% ({{ analysis.brightness > 50 ?'Light' :'Dark' }})
Contrast vs White: {{ analysis.contrastWhite.toFixed(2) }}:1 ({{ analysis.contrastWhite >= 4.5 ?'AA' : analysis.contrastWhite >= 3 ?'AA Large' :'Fail' }})
Contrast vs Black: {{ analysis.contrastBlack.toFixed(2) }}:1 ({{ analysis.contrastBlack >= 4.5 ?'AA' : analysis.contrastBlack >= 3 ?'AA Large' :'Fail' }})
Color Temperature: {{ analysis.temperature }}
Dominant Channel: {{ analysis.dominantChannel }}
Suggested Text: {{ analysis.suggestedTextColor }}
Accessibility: {{ analysis.accessibility }}
⚠️ {{ error }}

ℹ️ About Hex Color Viewer

Hex Color Viewer previews web colors and normalizes common CSS color notations into copy-ready Hex, RGB, HSL, HSV, and approximate CMYK values. Use it to check a design token, inspect a brand color, build a quick palette, or decide whether black or white text has enough contrast on a background color.

CSS colors such as hex, rgb(), hsl(), and named colors resolve to the sRGB color space described by the W3C CSS Color Module Level 4. This tool focuses on those everyday screen-color formats used in CSS, SVG, design systems, theme files, and UI documentation.

Accepted input:

  • Hex: #4ECDC4, #fff, 4ecdc4, or 0x4ecdc4.
  • RGB: rgb(78, 205, 196), rgba(78, 205, 196, 0.5), or 78,205,196; alpha is accepted but not preserved in the converted output.
  • HSL: hsl(176, 57%, 55%) with comma-separated hue, saturation, and lightness values.
  • Named colors: common CSS names such as red, blue, black, white, teal, lime, and purple.

Example: #4ECDC4 converts to rgb(78, 205, 196) and approximately hsl(176, 57%, 55%). The palette generator then derives monochromatic, analogous, complementary, and triadic suggestions from the same HSL hue relationship.

Contrast checks: the analysis compares the selected color against black and white text using the WCAG contrast ratio formula. Treat the 4.5:1 and 3:1 labels as practical checkpoints for normal text and large text; final accessibility review still depends on actual font size, weight, state, and surrounding UI.

Limitations:

  • HSV and CMYK are output formats here; the input parser does not accept hsv() or cmyk().
  • CMYK values are an approximate screen-to-print conversion, not a replacement for a printer profile or proof.
  • The current parser does not preserve alpha, parse percentage RGB, or accept modern color(), lab(), lch(), oklch(), HWB, Display P3, or space-separated CSS color syntax.
  • The named-color list is intentionally small; enter a hex, RGB, or HSL value when you need an exact CSS named color outside the built-in shortcuts.

Source references: CSS Color Module Level 4 and WCAG 2.2 Contrast (Minimum).

API Usage Example:

POST /api/tools/webdev/hex-color
Content-Type: application/json

{
    "input": "#4ECDC4"
}
Ready