RGB Color Converter/Picker
Convert between RGB, Hex, HSL, HSV and CMYK color codes, pick colors, check contrast and get a palette of tints and shades.
Hex (with or without #), rgb(), hsl(), hsv(), cmyk() or a CSS name like tomato.
Your colour
#2F80ED
Vivid blue
rgb(47, 128, 237)hsl(214, 84%, 56%)
- Hex#2F80ED
- RGBrgb(47, 128, 237)
- HSLhsl(214, 84%, 56%)
- HSVhsv(214, 80%, 93%)
- CMYKcmyk(80%, 46%, 0%, 7%)
Tints and shades
Lightest to darkest, your colour in the middle. Tap a step to copy its hex.
How this works: Method, 6 sources, Checked against 15 worked examples,
How this works
Method
Whatever you paste (hex, rgb(), hsl(), hsv(), cmyk() or a CSS colour name) is read as an RGB colour and converted to the other formats with the standard formulas; CMYK is the simple device-independent conversion, not a colour-managed print profile. Contrast uses WCAG relative luminance, (lighter + 0.05) ÷ (darker + 0.05); tints and shades step the HSL lightness towards white and black, and harmonies rotate the hue.
Sources
- W3C: WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum)
- W3C, WCAG 2.2: definitions of contrast ratio and relative luminance
- W3C, CSS Color Module Level 4
- Björn Ottosson (2020), A perceptual color space for image processing
- Myndex, SAPC-APCA documentation (APCA-W3 0.0.98G-4g)
- Machado, Oliveira and Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency
How it’s tested
15 worked examples for this page are checked by automated tests before every release: given the inputs, the tool must show the expected answer.
Privacy
On your device. Nothing you enter or open leaves this browser. About privacy labels
Changes
- Added eight pages: a colour picker for photos, a WCAG 2.2 and APCA contrast checker, a palette generator, a colour blindness simulator, and hex, RGB and CMYK converters.
- Redesigned: paste a colour in any format, HSV and CMYK added, opacity, a contrast check against white and black text, and colour harmonies.
- Fixed a crash when opening the colour picker.
- First published.
All 8 colour tools
Pick, check and build · Convert a colour code
Frequently Asked Questions
What is the difference between RGB, Hex, and HSL color formats?
RGB (Red, Green, Blue) defines colors using three values from 0-255 for each color channel. Hex is a compact hexadecimal representation of RGB values (e.g., #FF5733). HSL (Hue, Saturation, Lightness) describes colors using a 360-degree hue wheel, saturation percentage, and lightness percentage, making it more intuitive for adjusting colors.
What are color spaces and why do they matter?
Color spaces are mathematical models that define how colors are represented. RGB is used for screens, CMYK for print, and HSL for human-friendly color selection. Understanding color spaces helps ensure consistent colors across different devices and media.
How do I pick accessible colors for web design?
For accessibility, ensure sufficient contrast between text and background colors. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use lighter and darker shades from your palette to create readable combinations.
What are complementary colors and how do I find them?
Complementary colors sit opposite each other on the color wheel (180 degrees apart in HSL). For example, blue (#0000FF) has an orange complement (#FF9900). They create strong visual contrast and are commonly used in design to make elements stand out.
How do tints and shades work in color palettes?
Tints are created by adding white to a base color (increasing lightness in HSL), making it lighter. Shades are created by adding black (decreasing lightness), making it darker. Together, they form a cohesive palette from a single base color.