Color Code Converter
Convert between color formats
HEX Color
RGB Color
HSL Color
CMYK Color
Color Format Guide
HEX
6-digit hex code used in web design. Format: #RRGGBB
RGB
Red, Green, Blue values (0-255). Used in digital displays
HSL
Hue, Saturation, Lightness. Intuitive for color adjustments
CMYK
Cyan, Magenta, Yellow, Key. Used in print design
Visual Color Picker
Color Harmonies
Click on a harmony type to see related colors
Picker Tips
Copy Values
Click on any color value box to copy it to your clipboard
Color Harmonies
Use harmony rules to find colors that work well together
Visual Feedback
Preview changes in real-time as you adjust values
Mobile Friendly
Works great on mobile devices with native color picker
Palette Generator
Generated Palette
Palette Tips
Monochromatic
Variations of a single hue. Great for clean, cohesive designs
Analogous
Colors next to each other on the color wheel. Harmonious and natural
Complementary
Opposite colors on the wheel. High contrast and vibrant
Triadic
Three colors evenly spaced. Balanced and vibrant
Color Models Explained
HEX (Hexadecimal)
HEX is a 6-digit code representing RGB values in hexadecimal format. Each pair of digits represents Red, Green, and Blue values (00-FF or 0-255 in decimal).
- Format: #RRGGBB (e.g., #FF5733)
- Usage: Web design, CSS, HTML
- Example: #FF0000 = Red, #00FF00 = Green, #0000FF = Blue
RGB (Red, Green, Blue)
RGB is an additive color model used in digital displays. Colors are created by combining red, green, and blue light.
- Range: Each channel 0-255
- Usage: Digital screens, web design, image editing
- Example: rgb(255, 0, 0) = Red
HSL (Hue, Saturation, Lightness)
HSL is a more intuitive color model. Hue represents the color type, saturation is the intensity, and lightness is how light or dark the color is.
- Hue: 0-360 degrees (color wheel position)
- Saturation: 0-100% (0% = gray, 100% = full color)
- Lightness: 0-100% (0% = black, 100% = white)
CMYK (Cyan, Magenta, Yellow, Key)
CMYK is a subtractive color model used in printing. Colors are created by subtracting light using ink.
- Range: Each channel 0-100%
- Usage: Print design, professional printing
- Note: CMYK has a smaller color gamut than RGB
Conversion Formulas
Key conversion formulas:
- HEX to RGB: Split hex into pairs, convert each from hex to decimal
- RGB to HSL: Normalize RGB, find max/min, calculate hue/saturation/lightness
- RGB to CMYK: Convert RGB to 0-1 range, calculate CMY, find K (black)
Color Theory Basics
Primary Colors
Red, Blue, Yellow - cannot be created by mixing other colors
Secondary Colors
Orange, Green, Purple - created by mixing two primary colors
Complementary
Colors opposite on the color wheel. Create high contrast
Color Harmony
Pleasing color combinations based on color wheel relationships
Understanding Color Formats
Color codes are essential in web design, graphic design, and digital art. Different color formats serve different purposes - HEX and RGB for digital screens, CMYK for print, and HSL for intuitive color adjustments. Understanding how to convert between these formats is crucial for designers and developers.
Common Color Formats
The most commonly used color formats:
- HEX: 6-digit hexadecimal code (#RRGGBB). Most common in web development
- RGB: Red, Green, Blue values (0-255). Used in digital displays
- HSL: Hue, Saturation, Lightness. Intuitive for color adjustments
- CMYK: Cyan, Magenta, Yellow, Key. Used in professional printing
- HSV/HSB: Hue, Saturation, Value/Brightness. Similar to HSL
When to Use Each Format
Choose the right color format for your needs:
- Web Design: Use HEX or RGB for CSS and HTML
- Print Design: Use CMYK for professional printing
- Color Adjustments: Use HSL for intuitive hue/saturation/lightness changes
- Image Editing: Use RGB for digital images, CMYK for print output
Color Theory Basics
Understanding color theory helps create better designs:
- Complementary: Colors opposite on the color wheel (high contrast)
- Analogous: Colors next to each other (harmonious)
- Triadic: Three colors evenly spaced (balanced)
- Monochromatic: Variations of a single hue (cohesive)
Using This Converter
Follow these steps:
- Step 1: Enter a color value in any format (HEX, RGB, HSL, or CMYK)
- Step 2: The converter automatically updates all other formats
- Step 3: Click on any value to copy it to clipboard
- Step 4: Use the Color Picker tab for visual color selection
- Step 5: Generate palettes in the Palette tab
- Step 6: Learn color theory in the Guide tab
More Design & Development Tools
Explore more design and development calculators in our collection including PX to REM Converter