HTML Color Code Picker | Hex, RGB, HSL Color Picker

📖 How to Use This Color Picker

Use the color picker - Click the color box to open the system color picker and select any color.

Enter HEX code manually - Type a hex code (e.g., #FF0000 or FF0000) to see the color.

Click preset colors - Select from common web colors for quick access.

Copy color values - Click "Copy" next to any color format (Hex, RGB, HSL) to use in your code.

🎨 Understanding Color Models

Colors can be represented in different formats for web design and development. Each format has its own use case and advantages.

HEX (Hexadecimal): A six-digit code representing RGB values. Format: #RRGGBB where RR=red, GG=green, BB=blue (00-FF). Example: #FF0000 = red.
RGB (Red, Green, Blue): Each color component from 0-255. Example: rgb(255, 0, 0) = red.
HSL (Hue, Saturation, Lightness): Hue (0-360°) = color, Saturation (0-100%) = intensity, Lightness (0-100%) = brightness. Example: hsl(0, 100%, 50%) = red.

📊 Color Conversion Methods

HEX to RGB:
#RRGGBB → R = parseInt(RR, 16), G = parseInt(GG, 16), B = parseInt(BB, 16)
Example: #FF5733 → rgb(255, 87, 51)

RGB to HEX:
Convert each 0-255 value to 2-digit hex.
Example: rgb(255, 87, 51) → #FF5733

RGB to HSL:
Complex conversion based on mathematical formulas (used internally by this picker).

💡 Common Color Codes for Web Design

Red: #FF0000, rgb(255,0,0), hsl(0,100%,50%)
Green: #00FF00, rgb(0,255,0), hsl(120,100%,50%)
Blue: #0000FF, rgb(0,0,255), hsl(240,100%,50%)
Black: #000000, rgb(0,0,0), hsl(0,0%,0%)
White: #FFFFFF, rgb(255,255,255), hsl(0,0%,100%)
Yellow: #FFFF00, rgb(255,255,0), hsl(60,100%,50%)
Cyan: #00FFFF, rgb(0,255,255), hsl(180,100%,50%)
Magenta: #FF00FF, rgb(255,0,255), hsl(300,100%,50%)
Gray (50%): #808080, rgb(128,128,128), hsl(0,0%,50%)

❓ Frequently Asked Questions (FAQ)

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

HEX is a compact 6-digit code popular in HTML/CSS. RGB specifies red, green, blue components (0-255). HSL describes color by hue (color), saturation (vividness), and lightness (brightness). All represent the same colors in different formats.

How do I use HEX colors in CSS?

Use the hex code preceded by #. Example: color: #3498db; or background-color: #FF5733;

What does the HSL color model represent?

Hue (0-360°) represents the color itself (red=0°, green=120°, blue=240°). Saturation (0-100%) controls color intensity. Lightness (0-100%) controls brightness from black to white.

Can I pick a color from my screen?

This tool includes a native color picker input. For advanced eye dropper functionality, most modern browsers have built-in color pickers that can sample colors from anywhere on your screen when you click the color input.

What is a 3-digit hex code?

3-digit hex codes (#RGB) are shorthand where each digit is doubled. #F00 = #FF0000 (red), #0F0 = #00FF00 (green), #00F = #0000FF (blue). Our converter accepts both formats.

Why do my printed colors look different from screen?

Screens use RGB (additive color, light-based). Print uses CMYK (subtractive color, ink-based). Some RGB colors cannot be reproduced in CMYK. Use color management tools for print design.