Color Picker & Palette Code Extractor
Inspect color values, convert between HEX, RGB, and HSL, and check contrast ratios.
Privacy First: 100% Client-Side Processing
Processed in your browser. Files are never uploaded.
How to Use the Color Picker: HEX, RGB, HSL & Palette Extractor
- 1Use the visual color picker or enter a 6-character hexadecimal color code.
- 2Read the converted RGB channel values and HSL hue/saturation/lightness values.
- 3Review the calculated relative luminance to verify WCAG accessible contrast.
- 4Click on any code to copy the HEX, RGB, or HSL format to your clipboard.
Formula & How It Works
WCAG Relative Luminance & HSL Transform
Transforms sRGB space into relative perceptual luminance and cylindrical HSL coordinates.
Worked Examples
Analyzing Toolzy Blue (#3B82F6)
Input: HEX: #3B82F6
Explanation: Calculates normalized color channels and verifies black text readability.
Frequently Asked Questions
What is the difference between RGB and HSL?▼
RGB describes color as red, green, and blue light components; HSL describes color intuitively by Hue (tint), Saturation (intensity), and Lightness.
What is WCAG color contrast?▼
The Web Content Accessibility Guidelines require a minimum 4.5:1 contrast ratio between body text and its background for normal text readability.
How are 3-digit hex codes expanded?▼
A 3-digit hex code like #F00 is expanded by duplicating each character, becoming #FF0000 (pure red).
What is relative luminance?▼
Relative luminance measures the relative brightness of any point in a colorspace, normalized to 0 for black and 1 for white.
Quick Reference & Conversion Table
| Color Name | HEX Code | RGB Channels | HSL Values |
|---|---|---|---|
| Toolzy Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Emerald Green | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Amber Gold | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) |
| Rose Pink | #F43F5E | rgb(244, 63, 94) | hsl(350, 89%, 60%) |
⚠️ Common Pitfalls to Avoid
- •Omitting the leading '#' symbol in CSS stylesheets.
- •Assuming light colors will have sufficient contrast against white backgrounds.
💡 Practical Real-World Uses
- •Matching brand color schemes from logos and marketing graphics.
- •Auditing website accessibility (WCAG 2.1 AA/AAA) contrast compliance for buttons.
Related Online Tools
Explore complementary calculators and converters with instant client-side execution
PNG to SVG: Vector Graphics Converter & Path Tracer
Convert raster shapes into scalable W3C SVG vector paths with infinite resolution.
ICO Converter: Favicon & App Icon Generator
Generate comprehensive favicon ICO packages and HTML head tags for web applications.
Image Converter: WebP, AVIF & Compression Estimator
Estimate file sizes and bandwidth savings converting between PNG, JPEG, WebP, and AVIF.
Markdown Editor: Live Preview & HTML Renderer
Write and preview GitHub Flavored Markdown side-by-side with live HTML rendering.
HEIC to PNG Converter
Convert Apple iPhone HEIC photos to high-resolution PNG images safely in your browser.
HEIC to JPG Converter
Convert iPhone HEIC photos to compatible JPG images with adjustable quality and batch support.
Explore Other Tool Categories
Browse our full collection of 50 free web utilities
Unit Converters
Exact metric & imperial conversions for weight, length, temperature & volume.
Math & Education
Percentage changes, fractions, square roots, geometry & statistics.
Date & Time
Calendar arithmetic, business day intervals, stopwatch & multi-counter.
Home & Construction
Paint coverage, pool volume, topsoil, roof pitch, square footage & materials.