🎨 Color Picker

Pick and convert colors between HEX, RGB, and HSL formats. Free online color picker and converter tool.

Pick colors and convert between HEX, RGB, and HSL formats.

AWE-OS Color Picker is a free online tool for web developers, graphic designers, UI/UX designers, and digital artists to pick, convert, and explore colours across all major colour models: HEX (hexadecimal), RGB (Red Green Blue), HSL (Hue Saturation Lightness), and CMYK (Cyan Magenta Yellow Key/Black). The tool provides a visual colour wheel and gradient picker for intuitive colour selection, and instantly converts the selected colour to all four formats simultaneously. For web developers, the HEX and RGB values are displayed as ready-to-copy CSS code. A shade and tint generator creates a full palette of 9 tones from the selected colour — lighter tints and darker shades — which is essential for building consistent UI design systems and component libraries. A colour contrast checker shows whether the selected colour meets WCAG 2.1 AA and AAA accessibility standards when used as text on white or black backgrounds, which is critical for building accessible websites and apps.

Key Features

  • Visual colour wheel and gradient picker for intuitive colour selection without needing to know HEX codes
  • Instant four-way colour format conversion: HEX, RGB, HSL, and CMYK displayed simultaneously
  • CSS code generation — RGB and HSL values formatted as ready-to-copy CSS custom properties and utility classes
  • Shade and tint generator: 9-step palette from darkest to lightest for the selected hue — essential for design systems
  • WCAG contrast checker showing AA and AAA accessibility compliance for text on white and black backgrounds
  • Saved colour palette: bookmark up to 10 colours in a session for building a cohesive brand colour kit

Who Should Use This Tool

  • Web developers writing CSS stylesheets who need to convert a HEX colour from a design mockup (Figma, Sketch) to RGB or HSL for CSS variables and animations
  • UI/UX designers and product designers building design systems who need a full shade palette (e.g., primary-100 through primary-900) from a single brand colour
  • Graphic designers creating print materials who need CMYK values for the same colour used digitally in HEX or RGB to ensure colour consistency across digital and print
  • Digital marketers and brand managers identifying the exact HEX codes of competitor brand colours from screenshots for competitive analysis or brand guideline documentation

How to Use Color Picker

  1. Click anywhere on the colour wheel or drag the selector to choose a hue, saturation, and lightness visually
  2. Alternatively, type a known HEX code (e.g., #1E90FF) or RGB values directly into the input fields — all other formats update automatically
  3. Copy any of the four format values (HEX, RGB, HSL, CMYK) to your clipboard using the copy button next to each field
  4. Scroll down to the Shade Generator to see a 9-step palette of tints and shades based on your selected colour — click any shade to make it the active colour
  5. Check the WCAG Contrast section to verify whether your selected colour meets accessibility standards for text use

Why Choose AWE-OS Color Picker

  • Four-format simultaneous display eliminates the need to visit separate converters for HEX-to-RGB and RGB-to-HSL — all formats update instantly from a single colour selection or input
  • Shade generator with 9 steps produces a complete design system colour palette in one click — essential for Tailwind CSS projects, Material Design systems, and custom UI component libraries
  • WCAG accessibility checker built in — ensures your chosen colour combinations meet AA or AAA contrast requirements before shipping, avoiding accessibility issues discovered late in development

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL colour formats?

HEX (hexadecimal) is a 6-character code like #1E90FF that represents the Red, Green, and Blue components in base-16 notation. It is the most common format in web design. RGB (Red, Green, Blue) expresses the same three channels as decimal numbers from 0 to 255 — rgb(30, 144, 255). HSL (Hue, Saturation, Lightness) is more intuitive for designers: Hue is the colour angle (0°–360°), Saturation is the intensity (0% grey to 100% vivid), and Lightness is the brightness (0% black to 100% white). HSL makes it easy to create shades and tints by adjusting only the Lightness value. CMYK (Cyan, Magenta, Yellow, Key) is used for print colour specification.

What is WCAG colour contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for users with low vision or colour blindness. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text. In India, the Government of India's Guidelines for Indian Government Websites (GIGW) and the Rights of Persons with Disabilities Act 2016 (RPWD Act) mandate accessible web design for government websites. The AWE-OS Color Picker shows contrast ratios against both white and black backgrounds and flags AA/AAA compliance.

How do I find the HEX code of a colour I see on a website or image?

On a website: In Chrome or Firefox, right-click the element and choose "Inspect". In the Styles panel, find the color property — it is usually shown in HEX. Hover over the colour swatch to see a colour picker. On a screenshot or image: Use the browser's built-in eyedropper (available in Chrome and Edge DevTools), or use the AWE-OS Color Picker's HEX input to paste codes you find. For images on your device, tools like the Windows Snipping Tool (Windows 11) include a colour picker, and macOS Digital Colour Meter app can sample any pixel on screen. Many design tools like Figma, Adobe XD, and Canva show HEX codes in their properties panels.

Tips & Best Practices

  • Use the WCAG contrast checker built into the tool to verify that your chosen colour meets accessibility standards (4.5:1 contrast ratio for normal text, 3:1 for large text) before finalising any brand or website colour.
  • When building a design system or Tailwind CSS colour palette, generate shades from your primary brand colour using the shade generator and name them 50/100/200/300/400/500/600/700/800/900 following standard design token conventions.
  • For web design, prefer HSL format over HEX for CSS variables — HSL values are human-readable and easy to adjust: increasing the L (lightness) value creates a tint, decreasing creates a shade, making colour variations intuitive to calculate manually.
  • Save your brand colours to the session palette (up to 10 colours) while working on a design project — this prevents you from having to re-enter brand HEX codes each time you need a related shade or tint.
  • When matching a colour from a competitor's website or brand asset, use the browser DevTools eyedropper or the OS colour picker to sample the HEX code, then enter it in the AWE-OS colour picker to get its RGB, HSL, and CMYK equivalents in one step.
  • For print design requiring CMYK values, be aware that the CMYK equivalent shown is a mathematical conversion and may not exactly match physical Pantone or spot colour values — always request colour proofs from your printer for critical brand colour matching.

Common Mistakes to Avoid

  • Choosing brand colours without checking contrast ratios against your background colour — a beautifully on-brand colour that fails WCAG AA contrast (4.5:1) creates accessibility issues and can expose your website to legal liability in jurisdictions with accessibility mandates.
  • Assuming CMYK values from a digital HEX colour will match exactly in print — RGB and CMYK operate on different colour gamuts. Some vibrant digital colours cannot be physically reproduced in print. Always check with a printer's colour guide for critical brand colours.
  • Using very similar colours for primary action buttons and disabled state — colours that appear distinct on a calibrated monitor may be indistinguishable to users with colour blindness (affecting approximately 8% of men). Use the contrast checker to verify.
  • Copying HSL values from the colour picker into CSS without using the css() function or correct CSS syntax — CSS HSL requires `hsl(210, 100%, 50%)` syntax, not the decimal notation some colour pickers display. Verify the format matches your CSS specification.
  • Using the shade generator output without testing across different display brightness settings — darker shades can appear nearly identical on high-brightness monitors, causing UX issues for users with lower-quality displays.
  • Changing brand colours late in a project without updating all instances across the design system — use the palette feature to maintain a consistent set of approved colours and avoid ad-hoc colour additions.

Related Tools