Color Converter

Formula

HEX = #RRGGBB where each pair is base-16 (00-FF)

Each color format represents the same color differently. HEX uses hexadecimal, RGB uses decimal 0-255, HSL uses hue angle and percentages, CMYK uses ink percentages for printing.

Worked Examples

Example 1: Convert HEX to RGB

Problem:Convert the hex color #3B82F6 (blue) to RGB format.

Solution:HEX #3B82F6: 3B = 59 (3×16 + 11 = 59) 82 = 130 (8×16 + 2 = 130) F6 = 246 (15×16 + 6 = 246) Result: rgb(59, 130, 246)

Result:rgb(59, 130, 246)

Example 2: Create a Darker Shade

Problem:Make a color 30% darker using HSL.

Solution:Original: hsl(210, 90%, 55%) To darken, reduce Lightness by 30%: 55% - 30% = 25% Result: hsl(210, 90%, 25%) Keep hue and saturation, only adjust lightness for consistent shade variations.

Result:hsl(210, 90%, 25%)

Example 3: RGB to CMYK for Print

Problem:Convert rgb(255, 128, 0) orange to CMYK for printing.

Solution:RGB: R=255, G=128, B=0 Step 1: Normalize to 0-1 R'=1, G'=0.502, B'=0 Step 2: Find K (black) K = 1 - max(R',G',B') = 1 - 1 = 0 Step 3: Calculate CMY C = (1-R'-K)/(1-K) = 0% M = (1-G'-K)/(1-K) = 50% Y = (1-B'-K)/(1-K) = 100%

Result:cmyk(0%, 50%, 100%, 0%)

Frequently Asked Questions

What is HEX color format?

HEX (hexadecimal) color uses a 6-digit code with numbers 0-9 and letters A-F. It starts with # and represents Red, Green, Blue values (2 digits each). For example, #FF0000 is pure red (FF=255 red, 00=0 green, 00=0 blue). HEX is the most common format for web design and CSS.

What is the difference between RGB and RGBA?

RGB represents colors using Red, Green, Blue values from 0-255. RGBA adds an Alpha channel (0-1) for transparency. rgb(255, 0, 0) is solid red, while rgba(255, 0, 0, 0.5) is 50% transparent red. Use RGBA when you need transparency effects.

When should I use CMYK vs RGB?

RGB is for screens (web, digital). CMYK is for print (Cyan, Magenta, Yellow, Key/Black). Computer monitors emit light (RGB additive), while print absorbs light (CMYK subtractive). Always convert to CMYK before sending designs to print.

What is HSL and when is it useful?

HSL stands for Hue (0-360°), Saturation (0-100%), Lightness (0-100%). It's more intuitive for color adjustment. Want a darker version? Lower lightness. Want less vibrant? Lower saturation. The hue value represents the color wheel position.

How do I find complementary colors?

Complementary colors are opposite on the color wheel. In HSL, add 180° to the hue. If your color is hsl(200, 80%, 50%), the complement is hsl(20, 80%, 50%). Complementary colors create high contrast and visual interest.

What's the difference between HSL and HSV/HSB?

HSL uses Lightness (0% = black, 100% = white, 50% = pure color). HSV/HSB uses Value/Brightness (0% = black, 100% = pure color). HSL is often more intuitive for web design. Many design tools use HSB. Both describe the same colors differently.

How do I make colors accessible?

Ensure sufficient contrast ratio: 4.5:1 for normal text, 3:1 for large text (WCAG 2.1). Use tools to check contrast. Avoid color as the only indicator. Consider colorblind users (8% of males). Test with grayscale to check visual hierarchy.

Why do printed colors look different than on screen?

Screens emit light (RGB) while print reflects light (CMYK). Some RGB colors can't be reproduced in print (out of gamut), especially bright neons. Monitors vary in calibration. Paper texture and type affect color. Always print proofs before final production.

What is a Web Safe Color?

Web Safe colors are a set of 216 colors that were guaranteed to display correctly on 8-bit monitors (256 colors) in the 1990s. They are formed by combining 00, 33, 66, 99, CC, FF pairs. While less relevant today with modern displays, they are part of web history.

What is an Alpha Channel?

The Alpha channel controls the transparency or opacity of a color. In RGBA (Red, Green, Blue, Alpha), the alpha value ranges from 0 (completely transparent) to 1 (completely opaque). It allows for see-through effects in web design.

Background & Theory

Understanding color formats is essential for designers, developers, and anyone working with digital or print media. Each format has specific use cases and advantages.

Color Models:

RGB (Additive):

Used for screens (monitors, TVs, phones)
Combines Red, Green, Blue light
(0,0,0) = Black, (255,255,255) = White
16.7 million possible colors

CMYK (Subtractive):

Used for printing
Cyan, Magenta, Yellow, Key (Black)
Inks absorb light, reflect color
Smaller gamut than RGB

HSL/HSV (Perceptual):

Designed for human understanding
Hue: Color wheel position (0-360°)
Saturation: Color intensity
Lightness/Value: Light vs dark

Format Conversions:

HEX to RGB:
Split into pairs, convert base-16 to base-10
#FF5733 → (255, 87, 51)

RGB to HEX:
Convert each value to 2-digit hex
(59, 130, 246) → #3B82F6

RGB to HSL:

Normalize RGB to 0-1 range
Find max, min, difference
Calculate L = (max + min) / 2
Calculate S based on L
Calculate H based on which RGB is max

Web Color Standards:

Named Colors:
CSS supports 147 named colors (red, blue, coral, etc.)

Modern Formats:

rgb(255 0 0) - Modern RGB syntax
hsl(0 100% 50%) - HSL without commas
lab(50% 40 60) - Perceptually uniform
oklch(70% 0.15 30) - Better for gradients

Color Accessibility:

Contrast ratios (foreground:background):

4.5:1 - Normal text (AA)
3:1 - Large text (AA)
7:1 - Normal text (AAA)

Tools: WebAIM Contrast Checker, axe DevTools

Color Harmonies:

Complementary: Opposite on wheel (+180°)
Analogous: Adjacent colors (±30°)
Triadic: Three colors (±120°)
Split-complementary: Base + 2 adjacent to complement

Tips for Developers:

Use HSL for programmatic color manipulation
CSS custom properties for theme colors
Consider prefers-color-scheme for dark mode
Use relative colors in CSS Color Level 5
Always test on multiple devices

History

Color representation in computing has evolved significantly since the early days of digital displays. The first computer monitors were monochrome, displaying only green, amber, or white phosphors on black backgrounds. RGB (Red, Green, Blue) emerged as the standard for color displays in the 1970s, based on how human eyes perceive color through three types of cone cells. Early systems used limited color palettes (16, 256 colors) due to memory constraints. Hexadecimal notation became popular with HTML in the 1990s, offering a compact way to represent 16.7 million colors (#RRGGBB format). Web-safe colors (216 colors) were defined to ensure consistency across different monitors and browsers. CMYK predates digital color, originating in printing with the four-color process developed in the late 19th century. The "K" stands for Key (black), added because mixing CMY inks doesn't produce true black. HSL and HSV were developed in the 1970s to provide more intuitive color selection. Alvy Ray Smith created HSV for computer graphics, while HSL was designed to be more perceptually uniform. Modern color management uses ICC profiles to ensure consistent color across devices. Wide-gamut displays now exceed sRGB, introducing new challenges for web developers. CSS Color Level 4 introduces new color spaces like Lab and LCH for better color manipulation.