NUM8ERS Tutoring Center Dubai logo – you can count on us
Book Now
Sign In

🎨 HTML Color Picker 2026

Pick colors, get HEX, RGB, HSL codes — Extract colors from images

HEX
#6B7D2A
RGB
rgb(107, 125, 42)
RGBA
rgba(107, 125, 42, 1)
HSL
hsl(73, 50%, 33%)
HSLA
hsla(73, 50%, 33%, 1)
AARRGGBB
#FF6B7D2A

Pick Color from Image

📷 Click to upload or drag & drop an image

Then click anywhere on the image to pick a color

Popular Color Palettes

Understanding Color Codes

🔷 HEX Colors

#RRGGBB format uses hexadecimal (0-F). Each pair represents Red, Green, Blue intensity (00-FF). Example: #FF0000 = pure red.

🔴 RGB Colors

rgb(R, G, B) uses decimal 0-255 for each channel. RGBA adds alpha (0-1) for transparency. Example: rgba(255, 0, 0, 0.5) = 50% transparent red.

🌈 HSL Colors

hsl(H, S%, L%) uses Hue (0-360°), Saturation (0-100%), Lightness (0-100%). More intuitive for color adjustments.

📱 AARRGGBB

#AARRGGBB puts alpha first. Used in Android, Flutter. AA=FF is opaque, AA=00 is transparent. Example: #80FF0000 = 50% red.

Frequently Asked Questions

What is a HEX color code?
A HEX color code is a 6-digit hexadecimal value representing RGB colors. Format: #RRGGBB where each pair (00-FF) indicates Red, Green, Blue intensity. Example: #FF5733 = orange. Use in CSS: color: #FF5733;
How do I find a color code from an image?
Upload an image using the color picker from image tool above. Click anywhere on the image to extract the exact HEX, RGB, and HSL color codes. This is perfect for matching brand colors or design inspiration.
What is the difference between HEX and RGB?
HEX uses base-16 (0-9, A-F): #6B7D2A. RGB uses base-10 (0-255): rgb(107, 125, 42). Same colors, different notation. HEX is shorter; RGB is easier to understand.
What is RGBA and how do I use transparency?
RGBA adds alpha channel for transparency: rgba(R, G, B, A) where A is 0-1. Examples: rgba(255, 0, 0, 0.5) = 50% transparent red. rgba(0, 0, 0, 0.8) = 80% opaque black overlay.
What is HSL color format?
HSL = Hue (color wheel 0-360°), Saturation (intensity 0-100%), Lightness (0-100%). hsl(0, 100%, 50%) = pure red. Easier to create color variations by adjusting S and L.
What is AARRGGBB format?
AARRGGBB puts alpha (transparency) first: #FF6B7D2A. Used in Android/Flutter. AA=FF is fully opaque, AA=00 is fully transparent. Convert: alpha 50% = hex 80.
How do I use color picker in HTML?
Use the native HTML input: <input type="color" value="#ff0000">. Access value with JavaScript: input.value. For custom pickers, use Canvas API to create color wheels and gradients.
How do I convert HEX to RGB?
Split HEX into pairs, convert each from hex to decimal. #6B7D2A: 6B=107, 7D=125, 2A=42 → rgb(107, 125, 42). Formula: parseInt('6B', 16) = 107.
How do I convert RGB to HEX?
Convert each decimal to 2-digit hex. rgb(107, 125, 42): 107=6B, 125=7D, 42=2A → #6B7D2A. Formula: (107).toString(16).padStart(2,'0').
What are web-safe colors?
Web-safe colors are 216 colors that displayed consistently on old 256-color monitors. They use values 00, 33, 66, 99, CC, FF for each RGB channel. Less relevant today with modern displays.
How do I create a color palette?
Use color theory: Complementary (opposite on wheel), Analogous (adjacent), Triadic (equidistant). Tools generate HTML color palettes from a base color using these relationships.
What is the color code for red?
Pure red: HEX #FF0000, RGB rgb(255, 0, 0), HSL hsl(0, 100%, 50%). Variations: Crimson #DC143C, Tomato #FF6347, FireBrick #B22222.
How do I use colors in CSS?
Multiple ways: color: red; (named), color: #FF0000; (HEX), color: rgb(255,0,0); (RGB), color: hsl(0,100%,50%); (HSL). All work for color, background-color, border-color, etc.
What is a color wheel?
A color wheel arranges colors by hue in a circle: Red (0°), Yellow (60°), Green (120°), Cyan (180°), Blue (240°), Magenta (300°). Used for understanding color relationships and creating harmonious palettes.
How do I find complementary colors?
Complementary colors are opposite on the color wheel (180° apart). For hsl(73, 50%, 33%), complementary is hsl(253, 50%, 33%). They create high contrast and visual pop.
Can I pick colors from any image online?
Download the image first, then upload it here. For security, browsers don't allow reading pixels from external URLs directly. Our hex color from image tool works with any uploaded image file.
What color format should I use for web design?
HEX is most common and compact. Use RGBA/HSLA when you need transparency. HSL is best for creating color variations. Modern CSS supports all formats interchangeably.