Made with love by your friends at Hackingtons
Pick a color, get Hex / RGB / HSL codes, and generate palettes. Click any code to copy.
Made with love by your friends at Hackingtons
Click the color circle to open your browser's native color picker, or type a Hex code directly into the input field. The preview, Hex, RGB, and HSL values all update in real time. Click any code box to copy the value to your clipboard — ready to paste into CSS, HTML, Figma, or any design tool.
A Hex color code like #FF5733 is made up of three two-character pairs representing Red, Green, and Blue. Each pair is a hexadecimal number from 00 to FF (0 to 255 in decimal):
So #FF5733 = rgb(255, 87, 51). This tool does the math instantly — just pick or type a color.
To go the other direction, convert each RGB value (0–255) to a two-digit hexadecimal number. For example:
rgb(52, 152, 219) → 34 = 52, 98 = 152, DB = 219 → #3498DB
HSL stands for Hue, Saturation, Lightness — an alternative way to describe colors that many designers find more intuitive than RGB:
Two colors opposite each other on the color wheel (180° apart). They create maximum contrast and are great for call-to-action buttons, highlights, and making elements pop. Example: blue (#0066CC) and orange (#CC6600).
Three colors next to each other on the color wheel (within 30° of each other). They create smooth, harmonious palettes with low contrast. Great for backgrounds, gradients, and calm UIs. Example: blue, blue-green, green.
Three colors evenly spaced 120° apart on the color wheel. They create vibrant, balanced palettes with strong visual interest. Example: red, yellow, blue.
A base color plus the two colors adjacent to its complement. This offers high contrast like complementary colors but is less jarring. A great default choice for web design.
Shades are created by adding black to a color (decreasing lightness). Tints are created by adding white (increasing lightness). Both are essential for creating depth, hover states, and visual hierarchy in UI design.
CSS supports multiple color formats. All three formats shown in this tool are valid:
color: #3498DB; — the most common format in web development.color: rgb(52, 152, 219); — useful when you need to calculate colors programmatically.color: hsl(204, 70%, 53%); — great for creating consistent palettes by adjusting just one value.All three produce the same result. Choose whichever is easiest for your workflow.
| Color | Hex | RGB |
|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) |
| Green | #00FF00 | rgb(0, 255, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
| White | #FFFFFF | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
| Dodger Blue | #3498DB | rgb(52, 152, 219) |
| Hackingtons Orange | #E1510A | rgb(225, 81, 10) |
RGBA adds an alpha (opacity) channel to RGB. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque):
rgba(52, 152, 219, 0.5) — 50% transparent blue
HSLA does the same for HSL:
hsla(204, 70%, 53%, 0.5) — same blue, 50% transparent
RGBA and HSLA are commonly used for overlays, glass effects, shadows, and hover states in modern CSS.
Color contrast is critical for web accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background:
Low contrast makes text hard to read, especially for people with visual impairments, color blindness, or in bright sunlight on mobile. Always test your color choices against accessibility standards.
Warm colors (reds, oranges, yellows — roughly 0°–60° and 330°–360° on the color wheel) feel energetic, inviting, and attention-grabbing. They're commonly used for call-to-action buttons, sale banners, and food branding.
Cool colors (greens, blues, purples — roughly 120°–270°) feel calm, professional, and trustworthy. Banks, healthcare, and tech companies often use cool palettes. Most websites combine both — cool colors for the overall design with warm accents for CTAs.
| Color | Associations | Common Uses |
|---|---|---|
| Red | Energy, urgency, passion | Sale badges, alerts, food brands |
| Orange | Creativity, fun, confidence | CTAs, kids' brands, tech startups |
| Yellow | Optimism, warmth, attention | Highlights, warnings, friendly brands |
| Green | Growth, health, success | Success messages, eco brands, finance |
| Blue | Trust, calm, professionalism | Tech, healthcare, banking, social media |
| Purple | Luxury, creativity, wisdom | Premium brands, beauty, education |
| Dark Gray/Black | Sophistication, power, elegance | Luxury brands, portfolios, dark mode UI |
Quick reference for common hex color codes and their RGB equivalents:
| Name | Hex | RGB | HSL |
|---|---|---|---|
| Coral | #FF7F50 | rgb(255,127,80) | hsl(16,100%,66%) |
| Tomato | #FF6347 | rgb(255,99,71) | hsl(9,100%,64%) |
| Gold | #FFD700 | rgb(255,215,0) | hsl(51,100%,50%) |
| Lime Green | #32CD32 | rgb(50,205,50) | hsl(120,61%,50%) |
| Teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) |
| Dodger Blue | #1E90FF | rgb(30,144,255) | hsl(210,100%,56%) |
| Slate Blue | #6A5ACD | rgb(106,90,205) | hsl(248,53%,58%) |
| Hot Pink | #FF69B4 | rgb(255,105,180) | hsl(330,100%,71%) |
| Medium Purple | #9370DB | rgb(147,112,219) | hsl(260,60%,65%) |
| Steel Blue | #4682B4 | rgb(70,130,180) | hsl(207,44%,49%) |
Understanding color is one of the first things kids learn when building websites and games. At Hackingtons, students use hex codes and RGB values from their very first HTML lesson. By the time they're building games in Unity or designing websites with CSS, color theory becomes second nature. Learn more about our online coding program or try a free class.
Split the Hex code into three pairs (e.g. #FF5733 → FF, 57, 33) and convert each from hexadecimal to decimal. FF = 255, 57 = 87, 33 = 51. So #FF5733 = rgb(255, 87, 51). This tool does it automatically.
Convert each RGB value (0–255) to a two-digit hexadecimal number. For example, rgb(52, 152, 219) → 34, 98, DB → #3498DB.
A Hex color code is a 6-character string preceded by # that represents a color in HTML and CSS. Each pair of characters represents red, green, and blue in hexadecimal (base-16). #FF0000 = red, #00FF00 = green, #0000FF = blue.
All three describe the same colors in different formats. Hex uses a 6-character hex string (#3498DB). RGB uses three decimal values (rgb(52, 152, 219)). HSL uses hue, saturation, and lightness (hsl(204, 70%, 53%)). HSL is often the most human-readable.
HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It's often more intuitive than RGB because you can easily make a color lighter, darker, or more vivid by changing a single number.
RGBA is RGB with an alpha channel for opacity. The alpha ranges from 0 (transparent) to 1 (opaque). Example: rgba(52, 152, 219, 0.5) is a 50% transparent blue. Used for overlays, glass effects, and shadows.
Colors opposite each other on the color wheel (180° apart). They create maximum contrast. Blue and orange, red and green are classic complementary pairs.
Colors adjacent on the color wheel (within 30°). They create harmonious, low-contrast palettes. Blue, blue-green, and green are examples.
Three colors spaced 120° apart on the color wheel. They create vibrant, balanced palettes. Red, yellow, and blue are a classic triadic set.
Color contrast is the luminance difference between foreground and background. WCAG accessibility standards require a minimum 4.5:1 ratio for normal text. Good contrast ensures your site is readable by everyone, including people with visual impairments.
3–5 colors is ideal: one primary, one or two accents, and neutrals for text/backgrounds. Use shades and tints for variety without adding new colors to the palette.
#FFFFFF in Hex, rgb(255, 255, 255) in RGB, hsl(0, 0%, 100%) in HSL.
#000000 in Hex, rgb(0, 0, 0) in RGB, hsl(0, 0%, 0%) in HSL.
Yes — 100% free with no sign-up, no ads, and no limits. Pick colors and generate palettes as many times as you want.
Yes. Hex, RGB, and HSL are all valid CSS color formats. Click any code to copy it and paste directly into your stylesheet.