AfroTools / Tools

Color Picker

Pick colors and convert between HEX, RGB, HSL, OKLCH, CMYK. Gradient builder, contrast checker, Tailwind class finder, and African flag palettes.

6 Formats Instant WCAG Checker
Pick Color
Tailwind Class Finder
--
Palette Generator
Gradient Builder
WCAG Contrast Checker
Sample Text
Large Text
21:1
Named CSS Colors
African Flag Palettes
Export Palette

Export the current generated palette as CSS variables or a Tailwind config snippet.

Color Formats
HEX: #RRGGBB (6 digits)

RGB: rgb(R, G, B) values 0-255

HSL: hsl(H, S%, L%) hue 0-360, saturation and lightness 0-100%

OKLCH: oklch(L C H) perceptually uniform, modern CSS

CMYK: cmyk(C%, M%, Y%, K%) for print
About Colors
Colors can be specified using HEX codes (#000000 to #FFFFFF), RGB triplets, or HSL values. Different color models serve different purposes in design and development.
WCAG Guidelines
AA Normal: 4.5:1 ratio
AA Large: 3:1 ratio
AAA Normal: 7:1 ratio
AAA Large: 4.5:1 ratio

Large text is 18pt+ or 14pt bold.

This colour picker tool lets you explore, select, and convert colours across multiple formats including HEX, RGB, HSL, and CMYK. Use the interactive colour wheel and spectrum to find the perfect shade, then copy the colour code in whatever format your project needs. The tool also generates complementary, analogous, triadic, and other colour harmonies to help you build cohesive palettes. Designers, front-end developers, and digital artists will find it useful for everything from web design to branding projects. All processing happens in your browser, making it fast, private, and available even when you are offline.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL color formats?
HEX uses a six-digit hexadecimal code (e.g. #FF5733) for red, green, and blue. RGB specifies each channel as 0-255. HSL uses Hue (0-360), Saturation (0-100%), and Lightness (0-100%), which is more intuitive for adjusting colours.
What is OKLCH and why should I use it?
OKLCH is a perceptually uniform colour space now supported in modern CSS. It defines colours by Lightness, Chroma, and Hue in a way that matches how humans see differences, producing smoother gradients and more predictable adjustments than HSL.
How does the WCAG contrast checker work?
It calculates the luminance ratio between foreground and background colours. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text, ensuring readability for people with visual impairments.
How do I find the closest Tailwind CSS class for my colour?
The Tailwind Class Finder compares your chosen colour against every colour in the default Tailwind palette by measuring perceptual distance. It returns the closest match (e.g. bg-blue-500) so you can use Tailwind without custom configuration.
What is CMYK and how does it relate to RGB?
CMYK (Cyan, Magenta, Yellow, Key/black) is used in print. RGB is additive (light) while CMYK is subtractive (ink). Converting between them is approximate because they have different colour gamuts; on-screen colours may not match print exactly.

Related Image Tools

African Colour PaletteLogo MakerFavicon Generator View All Image Tools