Color Picker
Color Format Reference
HEX
Hexadecimal color code (e.g., #FF5733) consisting of # followed by 6 hex digits representing red, green, and blue channels. The most universal format in CSS and web design.
RGB / CSS rgb()
Red, green, and blue channels each ranging 0-255. Intuitive for programmatic color manipulation. The native color model for screen displays, used via CSS rgb() function.
HSL / HSB
Hue (0-360), Saturation (0-100%), Lightness/Brightness (0-100%). HSL aligns with human perception, making it ideal for creating color schemes. HSB (also called HSV) is more common in design software like Photoshop.
CMYK
Cyan, Magenta, Yellow, and Key (black) — the subtractive color model for print. Essential when designs move from screen to paper. Converting to CMYK early helps avoid unexpected color shifts in print production.
Color Theory Basics
Primary colors (red, yellow, blue) cannot be created by mixing. Secondary colors (orange, green, purple) are formed by mixing two primaries equally. Tertiary colors (e.g., red-orange, blue-violet) mix a primary with an adjacent secondary. Complementary colors (opposite on the wheel) create strong contrast; analogous colors (within 30 degrees) feel harmonious; triadic colors (120 degrees apart) balance vibrancy with variety.
FAQ
- What is the difference between HEX and RGB?
- They encode the same information in different notation. HEX uses base-16 (#FF0000) while RGB uses decimal (255, 0, 0). HEX is more compact for stylesheets; RGB is easier to read and compute with programmatically.
- Why do colors look different on screen vs. print?
- Screens use the additive RGB model (mixing light), while printers use the subtractive CMYK model (ink absorbs light). Their color gamuts differ — some vivid RGB colors fall outside CMYK range, causing shifts when printed.
- What is the difference between HSL and HSB (HSV)?
- Both use hue and saturation, but differ in the third component. In HSL, 50% lightness gives the pure hue, 0% is black, 100% is white. In HSB, 100% brightness is the pure or lightest color, 0% is black. CSS natively supports HSL; design tools like Photoshop prefer HSB.
- What is the HWB color format?
- HWB stands for Hue, Whiteness, Blackness. It is more intuitive than HSL — pick a hue, then mix in white or black. The CSS Color Level 4 specification supports hwb() and all modern browsers implement it.
💬 Comments
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL colors? +
HEX (#FF5733) is compact, used in HTML/CSS. RGB (255, 87, 51) specifies red/green/blue channels 0-255, intuitive for mixing. HSL (hue 0-360°, saturation %, lightness %) is the most human-friendly — easy to create lighter/darker variants by adjusting lightness.
How do I create a color palette for my website? +
Start with one primary brand color. Use the color wheel to find complementary (180° opposite), analogous (±30°), or triadic (120° apart) colors. Keep 60-30-10 rule: 60% dominant neutral, 30% secondary, 10% accent. Test contrast ratios for accessibility.
What is WCAG color contrast and why does it matter? +
WCAG (Web Content Accessibility Guidelines) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against the background. Poor contrast makes text unreadable for people with visual impairments and can affect SEO.
How do I convert a Pantone color to HEX? +
Pantone colors are physical ink standards and don't have perfect digital equivalents (screens are RGB, printing is CMYK). Most Pantone color guides list their nearest CMYK/RGB/HEX equivalents. Use our color converter to refine the match visually.
What colors work best for dark mode UI? +
Avoid pure black (#000000) — use dark grays (#121212 to #1e1e1e). For text, use off-white (#e0e0e0) not pure white. Reduce color saturation by 10-20% compared to light mode. Primary colors should be lighter (higher lightness in HSL) to maintain contrast against dark backgrounds.