Color Picker/Converter
Powerful color picker, converter and palette generator supporting HEX, RGB, HSL, CMYK formats
Preview Text Effect
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
About Color Formats
Colors can be represented in various formats, each with specific purposes and advantages. This tool supports conversion between the most commonly used color formats.
Understanding different color models is crucial for web development, UI design, and digital art creation.
Supported Color Formats
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Color Format Details
HEX (Hexadecimal)
HEX colors use 6-digit hexadecimal notation starting with #. Each pair represents red, green, blue values (00-FF). Short format (#RGB) expands to #RRGGBB. 8-digit format supports transparency (#RRGGBBAA).
Use cases: CSS, HTML, web design, most programming languages
RGB (Red, Green, Blue)
RGB is an additive color model that creates colors by mixing red, green, and blue light. This model directly corresponds to how screens emit light and is the native color space for digital displays.
Use cases: Screen display, LED lighting, CSS, digital image processing
HSL (Hue, Saturation, Lightness)
HSL represents colors based on human perception. Hue is the angle on the color wheel, saturation is color intensity, and lightness is how bright or dark the color is. This makes color adjustments more intuitive.
Use cases: CSS, color scheme generation, intuitive color selection
HSV/HSB (Hue, Saturation, Value/Brightness)
HSV (also called HSB) is similar to HSL but uses value instead of lightness. Value represents brightness, with 100% being brightest. This model is preferred in many graphics applications as it aligns better with how artists think about color.
Use cases: Photoshop, GIMP, color pickers in graphics software
CMYK (Cyan, Magenta, Yellow, Key/Black)
CMYK is a subtractive color model used in printing. Unlike RGB which adds light, CMYK subtracts light from white paper. 'K' stands for Key (black), used to improve print quality and reduce ink usage.
Use cases: Print design, commercial printing, packaging design
YCbCr (Luminance, Chrominance)
YCbCr separates luminance (Y) from chrominance (Cb, Cr) components. This separation allows efficient video compression because the human eye is more sensitive to brightness than color. Commonly used in JPEG, MPEG, and broadcast standards.
Application: JPEG compression, video encoding (H.264, HEVC), TV broadcasting
Lab (CIE L*a*b*)
Lab is a perceptually uniform color space designed to approximate human vision. L* represents lightness, a* is the green-red axis, and b* is the blue-yellow axis. One unit of perceptual distance looks roughly the same regardless of color.
Application: Color science, color difference calculation (Delta E), professional color management
Pantone
The Pantone Matching System (PMS) is a proprietary color standardization system widely used in printing, fashion, and product design. Each color has a unique code ensuring consistent color reproduction across different materials and manufacturers.
Application: Brand identity, commercial printing, packaging design, textile industry
Note: These are digital approximations. Actual Pantone colors may vary in print due to ink and paper differences.
Color Theory Basics
Colors exist in different 'spaces' optimized for different purposes. Additive models (RGB) work by adding light, while subtractive models (CMYK) work by absorbing light. Perceptual models (Lab) align with human vision.
Additive Model
RGB creates colors by mixing red, green, and blue light. Mixing all three lights at maximum intensity produces white. This is how screens, projectors, and digital displays work.
Subtractive Model
CMYK absorbs (subtracts) wavelengths of light from white. Theoretically, mixing all colors produces black. This is how inks and pigments work.
Perceptual Color Model
Lab and similar color spaces are designed around human perception, making them ideal for color comparison and correction.
Conversion Notes
- RGB ↔ HEX: Lossless conversion, format change only
- RGB ↔ HSL/HSV: Lossless within gamut, possible precision loss
- RGB ↔ CMYK: May lose colors outside print gamut
- RGB ↔ Lab: Uses D65 illuminant, assumes sRGB color space
- RGB ↔ YCbCr: Uses BT.601 standard by default
WCAG Contrast Standards
Web Content Accessibility Guidelines (WCAG) define minimum contrast requirements between text and background to ensure all users, including those with visual impairments, can read content.