Color Converter

Understanding Color Formats

Colors can be represented in multiple formats, each with its own use case. Understanding these formats helps you work effectively with colors in design, development, and print.

🎨 HEX (Hexadecimal)

HEX is the most common color format for web design. It uses a 6-digit hexadecimal code to represent RGB values.

• Format: #RRGGBB (e.g., #EC4899)
• Short form: #RGB for colors like #F00 (red)
• Use cases: Web design, CSS, HTML
• Range: 00-FF for each channel (0-255)

🔴 RGB (Red, Green, Blue)

RGB is an additive color model used in digital displays. Colors are created by combining red, green, and blue light.

• Format: rgb(R, G, B) (e.g., rgb(236, 72, 153))
• Range: 0-255 for each channel
• Use cases: Digital design, CSS, programming
• Note: rgb(0,0,0) is black, rgb(255,255,255) is white

🌈 HSL (Hue, Saturation, Lightness)

HSL is a more intuitive color model that represents colors the way humans perceive them.

• Format: hsl(H, S%, L%) (e.g., hsl(330, 81%, 60%))
• Hue: 0-360 degrees on the color wheel
• Saturation: 0% (gray) to 100% (full color)
• Lightness: 0% (black) to 100% (white)
• Use cases: Design, color adjustments, CSS

🎯 HSV (Hue, Saturation, Value)

HSV is similar to HSL but uses "Value" (brightness) instead of Lightness. Also known as HSB (Hue, Saturation, Brightness).

• Format: hsv(H, S%, V%)
• Use cases: Color pickers, design software
• Note: More intuitive for selecting colors

🖨️ CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK is a subtractive color model used in printing. Colors are created by subtracting light with ink.

• Format: cmyk(C%, M%, Y%, K%)
• Range: 0-100% for each channel
• Use cases: Print design, professional printing
• Note: cmyk(0,0,0,0) is white, cmyk(0,0,0,100) is black

🎨 Color Harmonies

Color harmonies are pleasing combinations of colors based on their positions on the color wheel:

• Complementary: Colors opposite each other (high contrast)
• Analogous: Colors next to each other (harmonious)
• Triadic: Three colors evenly spaced (balanced)
• Split-Complementary: Base color + two colors adjacent to its complement
• Tetradic: Four colors forming a rectangle
• Monochromatic: Different shades/tints of one color

💡 Tips for Working with Colors

• Use HSL for adjustments: Easier to modify hue, saturation, and lightness
• Check contrast: Ensure text is readable against backgrounds
• Test on different devices: Colors may appear differently
• Use color harmonies: Create pleasing color schemes
• Save your palette: Keep consistent colors across your project
• Consider accessibility: Use tools to check color contrast ratios

🔍 How to Use This Tool

1. Pick a color using the color picker or enter a value
2. Switch between formats to see the color in different representations
3. Use sliders for precise adjustments
4. Explore harmonies to find complementary colors
5. View shades & tints for variations
6. Save colors to build your palette
7. Copy values by clicking on any format