Color Picker & Palette Generator
Pick any colour and instantly get HEX, RGB, HSL values. Generate tints, shades, and colour harmonies. Check WCAG contrast scores for accessibility.
Colour Picker
Accessibility — WCAG Contrast
WCAG AA requires ≥ 4.5:1 for normal text. AAA requires ≥ 7:1. AA Large requires ≥ 3:1 for large text (18pt+).
Generated Palettes
Popular Colours
Colour Theory Tips
Free Online Color Picker & Palette Generator — HEX, RGB, HSL in One Click
Every design project starts with colour. The right colour combination sets the mood, defines the brand, and guides the user's eye through a layout. But finding the exact HEX code you need, converting it to RGB for CSS, checking whether it meets WCAG accessibility standards, and generating a complementary palette can involve four different tools. The OmniWebKit Color Picker combines all of that into one fast, free, browser-based tool.
Use the native colour picker or type any hex value to see the colour displayed instantly. All five CSS colour formats update automatically: HEX, RGB, RGBA, HSL, and HSLA. Each format has its own one-click copy button. Below the main picker, a breakdown shows the individual R, G, and B channel values alongside the H (hue), S (saturation), and L (lightness) values from the HSL model — giving you full visibility into the colour's composition.
The palette generator produces three types of palettes from your chosen colour: tints (lighter versions), shades (darker versions), and eight colour harmonies — complementary, analogous, triadic, split-complementary, and tetradic. Click any swatch to make it the active colour. Use the Download PNG button to export the entire palette as an image file, ready for a mood board, design system, or client presentation.
Understanding Colour Formats — HEX, RGB, HSL, and When to Use Each
Colours on screens can be expressed in several different formats. Each format has its own strengths, and different tools or contexts require different ones. Here is a practical guide to all five formats this tool supports.
HEX (#RRGGBB)
The most common format for web and graphic design. HEX is a six-character code where each pair of characters represents a Red, Green, and Blue channel value from 00 (minimum) to FF (maximum). It is compact, easy to copy, and universally supported in CSS. Use HEX when you are working in HTML, CSS, Figma, Sketch, or any standard web design tool.
RGB (rgb(R,G,B))
The functional CSS notation for colour. RGB explicitly states the red, green, and blue channel values as integers from 0 to 255. It is easier to understand intuitively than HEX — you can see at a glance that rgb(255,0,0) is pure red. Use RGB when you need to manipulate channel values programmatically or when the tool you are using expects the functional CSS syntax.
RGBA (rgba(R,G,B,A))
The same as RGB but with an additional alpha (opacity) channel. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). RGBA is essential whenever you need semi-transparent colours — for overlays, glass effects, shadows, and background fills that allow content to show through.
HSL (hsl(H,S%,L%))
HSL stands for Hue, Saturation, and Lightness. Hue is the colour angle on a 360° wheel. Saturation controls how vivid the colour is. Lightness controls how bright or dark it is. HSL is far more intuitive for designers because adjusting only the L value lets you create tints and shades of a colour while keeping the hue identical. Most design systems use HSL under the hood.
HSLA (hsla(H,S%,L%,A))
HSL with an alpha channel for transparency. Provides the intuitive hue, saturation, lightness model combined with opacity control. Ideal for design systems that need consistent, transparent colour variants derived from a base palette.
Colour Accessibility — Why WCAG Contrast Ratios Matter
Roughly 8% of men and 0.5% of women have some form of colour vision deficiency. Many more users view content on screens in bright sunlight, with screen brightness turned low, or on ageing displays with reduced contrast. Accessibility is not just a legal requirement in many jurisdictions — it is fundamental good design.
The Web Content Accessibility Guidelines (WCAG) define three contrast standard levels. WCAG AA requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text. These ratios apply between the text colour and its immediate background colour.
The accessibility panel in this tool calculates your selected colour's contrast ratio against both pure white (#FFFFFF) and pure black (#000000), and shows the WCAG rating (AA, AAA, AA Large, or Fail) for each. As a general rule, if a colour achieves WCAG AA against white, it is safe for light backgrounds. If it achieves WCAG AA against black, it is safe for dark backgrounds.