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.

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.

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:** 1. Normalize RGB to 0-1 range 2. Find max, min, difference 3. Calculate L = (max + min) / 2 4. Calculate S based on L 5. 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:** 1. Use HSL for programmatic color manipulation 2. CSS custom properties for theme colors 3. Consider prefers-color-scheme for dark mode 4. Use relative colors in CSS Color Level 5 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.