Color Picker/Converter
Pick colors and convert between different formats
Alternative Matches:
Preview text appearance
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 many different formats, each with its specific use cases and advantages. This tool supports conversion between the most commonly used color formats.
Understanding different color models is essential 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 a 6-digit hexadecimal notation preceded by #. Each pair represents Red, Green, and Blue values (00-FF). Short notation (#RGB) expands to #RRGGBB. Supports 8-digit format for alpha transparency (#RRGGBBAA).
Usage: CSS, HTML, web design, most programming languages
RGB (Red, Green, Blue)
The RGB model is an additive color model where red, green, and blue light are combined to create colors. This model directly maps to how screens emit light, making it the native color space for digital displays.
Usage: Screen displays, LED lighting, CSS, digital imaging
HSL (Hue, Saturation, Lightness)
HSL represents colors in terms of human perception. Hue is the color angle on a color wheel, Saturation is the intensity, and Lightness is how light or dark the color is. This makes color manipulation more intuitive.
Usage: CSS, color scheme generation, intuitive color picking
HSV/HSB (Hue, Saturation, Value/Brightness)
HSV (also called HSB) is similar to HSL but uses Value instead of Lightness. Value represents the brightness where 100% is the brightest. This model is preferred in many graphics applications as it aligns better with how artists think about color.
Usage: 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. The 'K' stands for Key (black) to improve print quality and reduce ink usage.
Usage: Print design, commercial printing, packaging
YCbCr (Luminance, Chrominance)
YCbCr separates the luma (Y) from chroma (Cb, Cr) components. This separation allows efficient video compression because human eyes are more sensitive to brightness than color. Commonly used in JPEG, MPEG, and broadcast standards.
Usage: 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* the green-red axis, and b* the blue-yellow axis. A perceptual distance of 1 unit looks roughly the same regardless of the color.
Usage: Color science, color difference calculation (Delta E), professional color management
Pantone (PMS)
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 reproduction across different materials and manufacturers.
Usage: Brand identity, commercial printing, packaging design, textile industry
Note: These are approximate digital representations. Actual Pantone colors may vary in print.
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 Color Model
RGB combines red, green, and blue light. Adding all three at full intensity creates white. This is how screens, projectors, and digital displays work.
Subtractive Color Model
CMYK absorbs (subtracts) light wavelengths from white. Combining all colors creates black (in theory). This is how inks and paints work.
Perceptual Color Model
Lab and similar spaces are designed around human perception, making them ideal for color comparison and correction.
Conversion Notes
- RGB ↔ HEX: Lossless conversion, just format change
- RGB ↔ HSL/HSV: Lossless within gamut, may lose precision
- RGB ↔ CMYK: May lose colors outside print gamut
- RGB ↔ Lab: Uses D65 illuminant, sRGB color space assumed
- RGB ↔ YCbCr: Uses BT.601 standard by default
WCAG Contrast Standards
The Web Content Accessibility Guidelines (WCAG) define minimum contrast requirements between text and background to ensure all users, including those with visual impairments, can read the content.