UtilityGlen
UtilityGlen / Design Workspace

HTML Color Codes.
Every shade. Every tool.

One creative workspace for picking precise colors, converting HEX and RGB, exploring harmonies, building palettes, checking accessibility, designing gradients, and discovering colors from images.

Live previews One-click copy Local image processing 9 connected tools

Color Picker & Format Converter

Pick visually, edit exact values, or copy ready-to-paste HTML and CSS codes.

01 / YOUR BASE COLOR
Pick from the spectrum
Edit values directly
#3B82F6

RGB, HSL and CMYK fields are editable. CMYK is an approximate screen conversion, not a printer ICC profile.

Ready-to-copy color codes
Your saved colors (this browser)
Tap Save color to start a collection.

Interactive Color Wheel

Choose hues and saturation by clicking or dragging on the wheel.

02 / EXPLORE COLOR
COLOR THEORY, MADE TANGIBLE

Move around the wheel. Find your mood.

The angle selects a hue, and distance from the center controls saturation. The selected color updates the picker, harmonies and shades throughout the studio.

0° Red120° Green240° BlueCenter = White

Tip: Color previews are shown in sRGB. Browser and display calibration can affect how they appear.

Color Harmonies

Five automatically coordinated combinations generated from your current color.

03 / COLOR THEORY

Select any swatch to make it your base color. Combinations use HSL relationships, which are creative suggestions—not guaranteed accessibility pairs.

Tints, Shades & Tones

Build color scales for UI states, typography, surfaces and design tokens.

04 / 27 SWATCHES

Tints mix your color with white; shades mix it with black; tones mix it with neutral gray. Click a swatch to edit it in the main picker.

CSS Gradient Builder

Combine two or three colors into an editable CSS background.

05 / DESIGN A GRADIENT
A little color magic.
Your gradient appears here
Generated CSS

WCAG Contrast Checker

Test foreground/background readability using the WCAG 2.x contrast-ratio formula.

06 / ACCESSIBILITY
CONTRAST RATIO
17.85:1
AA · NormalPASS
AA · LargePASS
AAA · NormalPASS

WCAG 2.x: AA normal text ≥ 4.5:1; AA large text ≥ 3:1; AAA normal text ≥ 7:1. Color contrast alone does not establish full accessibility compliance.

Readable by design.

The right color pairing makes words easier to read for more people. Test your own heading and paragraph colors here.

Example action

Five-Color Palette Generator

Find coordinated combinations. Lock your favorites, then regenerate the remaining colors.

07 / CREATE A PALETTE

Click a color to use it in the picker. Use the lock icon to protect individual shades during regeneration. Tip: press Space while outside form fields to regenerate.

Image Color Extractor

Upload a photo, extract up to six dominant colors, and pick individual pixels from the image.

08 / IMAGE TO PALETTE
EXTRACTED PALETTE

Your photo, distilled.

Discover colors already working together in nature, photography, or visual inspiration. Upload an image to calculate a representative color palette.

Your extracted colors will appear here.

HTML / CSS Named Color Library

Find standard CSS named colors by name, HEX value, or hue family.

09 / COLOR REFERENCE

These are standardized CSS color keywords (including spelling aliases such as gray/grey). Select one to load it into the picker; use the copy button there for its code.

A few things to know: HEX, RGB, HSL and HSV values are computed in standard sRGB. CMYK numbers are approximations for learning and should not replace professional color-managed print conversions. Uploaded images are decoded and analyzed locally in your browser; no image-upload service is used by this tool. For actual website accessibility, test contrast alongside font size, weight, states and other WCAG requirements.
The color field journal

Every color has a code.
Every code has a story.

Meet UtilityGlen HTML Color Codes Studio— your all-in-one workspace for discovering, converting, combining, and testing colors for websites. Explore HEX, RGB, HSL, HSV, and CMYK, create CSS gradients, build palettes, extract inspiration from images, and check whether your text is readable. All in one browser-based color playground.

9 creative tools 148 named CSS colors WCAG contrast testing Copy-ready CSS
the-color-universe.css
HEX #3B82F6
RGB 59, 130, 246
HSL 217°, 91%, 60%
NAME YOUR NEXT IDEA
Nine tools, one creative flow

From “what's this color?” to “this looks amazing.”

You don't have to hop between a color converter, palette maker, gradient editor, and accessibility tester. Pick the right station below and make something useful.

01

HTML Color Picker & Converter

Pick a hue, control opacity, edit RGB/HSL/CMYK numbers, and get HEX, HEXA, RGB, RGBA, HSL, HSLA, and HSV values.

Explore color codes
02

Interactive Color Wheel

Move around the spectrum to choose a hue; move inward to soften its saturation. Watch connected tools update around your choice.

Spin the color wheel
03

Color Harmony Finder

Discover complementary, analogous, triadic, split-complementary, and tetradic combinations derived from your base color.

Explore harmonies
04

Tints, Shades & Tones

Generate 27 lighter, darker, and muted swatches for button states, section backgrounds, and consistent design systems.

Build a color scale
05

CSS Gradient Generator

Blend two or three colors using linear, radial, or conic gradients. Adjust direction and stops, preview, then copy the CSS.

Create a gradient
06

WCAG Contrast Checker

Test text against a background using a measured contrast ratio, with AA normal, AA large, and AAA normal-text indicators.

Check accessibility
07

Five-Color Palette Maker

Generate balanced, pastel, vibrant, earthy, dark, and monochrome palettes. Lock favorites, export CSS variables or JSON.

Make a palette
08

Image Color Extractor

Choose a photo to find up to six representative colors, sample pixels, and move your extracted palette into the generator.

Find photo colors
09

CSS Named Color Library

Search 148 standard color keywords—including names such as coral, lavender, and rebeccapurple.

Browse color names
The color decoder

What is an HTML color code, anyway?

A color code tells a browser which color to display. In modern web design you normally apply it with CSS, such as color or background-color. Different formats can describe the same visual color.

#3B82F6
3B Red: 59
82 Green: 130
F6 Blue: 246

A six-digit HEX color uses two hexadecimal digits per channel: red, green, and blue.

HEX #3B82F6

Compact six-digit hexadecimal notation.

RGB rgb(59, 130, 246)

Three red, green, and blue channels on a 0–255 scale.

HSL hsl(217, 91%, 60%)

Hue, saturation, and lightness—a convenient way to explore color relationships.

RGBA rgba(59, 130, 246, 0.5)

RGB with alpha transparency. You can also use eight-digit HEX, such as #3B82F680.

HSV 217°, 76%, 96%

Hue, saturation, and value (brightness), commonly used in color pickers.

CMYK ≈ 76%, 47%, 0%, 4%

An approximate cyan, magenta, yellow, black conversion, useful for learning—not a print-profile conversion.

Did you know? CSS also recognizes color names like tomato and steelblue. Use the named-color library to explore them.
A designer's four-step shortcut

How to build a website color palette

A simple approach that works for landing pages, apps, dashboards, blog designs, and creative side projects.

01

Pick your anchor color

Use the HTML color picker or enter a HEX code. This becomes your main accent or brand color.

02

Find compatible colors

Try harmonies, lighter tints, darker shades, or generate a five-color palette with your preferred mood.

03

Test the readable pairs

Check foreground and background combinations. Adjust them before adding text or interactive UI.

04

Export and apply

Copy HEX or RGB values, gradient declarations, or CSS variables. Paste into your styles and refine.

Color moods, decoded

Three palettes. Three completely different feelings.

Color harmony is only part of design. The same website layout can feel bold, calming, or playful depending on its palette. These are starting points, not automatic accessibility-approved combinations.

Ocean Tech

Crisp, confident blues paired with dark navy. Explore for dashboards and modern interfaces.

#0B1120 · #1D4ED8 · #38BDF8 · #F8FAFC

Golden Hour

Warm orange and cream inspired by sunshine. Try it for food, lifestyle, and expressive brands.

#7C2D12 · #EA580C · #FDBA74 · #FFFBEB

Fresh Meadow

Clean greens with gentle mint. A calm foundation for nature-inspired and wellness visuals.

#064E3B · #059669 · #A7F3D0 · #F0FDF4
Design for more eyes

Beautiful colors mean little if people can't read them.

Low-contrast text may look elegant on a design mockup but be difficult to read on a real screen. The studio's WCAG color contrast checker measures text and background colors using the WCAG 2.x contrast formula.

Here are the commonly used text thresholds from WCAG 2.x. Passing a contrast ratio is important, but it doesn't prove that an entire website meets accessibility requirements.

4.5:1 AA • normal text
3:1 AA • large text
7:1 AAA • normal text

Test your own color pair in the checker

Readable by design.

Dark text on a light background creates a strong contrast that is easier to distinguish.

Example: strong contrast
Pretty, but harder to read.

Light gray text on white can blend into the background, especially at small sizes.

Example: low contrast
Tiny recipes, big visual impact

HTML and CSS color examples you can use

A color code becomes useful when you put it to work. Here are two quick examples—one for a solid button, one for a two-color gradient.

A confident blue button

Example 1: A solid HEX color

Use HEX codes in CSS to give buttons, headings, cards, or backgrounds a consistent color. 

.example-button {
  background-color: #2563eb;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 12px;
}
Two colors, one gradient

Example 2: A CSS linear gradient

Use the gradient builder above to customize the angle, choose colors, and copy the CSS declaration. 

.gradient-panel {
  background: linear-gradient(
    135deg, #3b82f6, #8b5cf6
  );
  border-radius: 18px;
}
The color questions everyone asks

HTML color codes FAQ

Short answers to real color-design problems—from converting codes to checking accessibility and pulling a palette out of a photo.

What are HTML color codes used for?

HTML color codes identify colors for webpages and interfaces. Today, colors are usually applied through CSS properties such as color, background-color, and border-color. You can specify colors using HEX, RGB, HSL, and CSS color names, among other supported formats.

How do I convert a HEX color to RGB or HSL?

Enter a HEX value such as #3B82F6 in the studio's color converter. It calculates corresponding RGB and HSL values automatically. The same blue is approximately rgb(59, 130, 246) or hsl(217, 91%, 60%).

What's the difference between HEX and RGB?

HEX and RGB can represent the same sRGB color. A six-digit HEX code expresses the red, green, and blue channels in hexadecimal pairs; RGB writes them as decimal numbers. Choose whichever format is more convenient for your project or design system.

How do I make a HEX color transparent?

Use an eight-digit HEX code with an alpha channel, such as #3B82F680, which represents approximately 50% opacity. Or use a CSS color format with an explicit alpha value, such as rgb(59 130 246 / 50%). The studio includes an opacity slider and HEXA/RGBA outputs.

How can I generate matching colors for my website?

Select a base color and open Color Harmonies for complementary, analogous, triadic, split-complementary, and tetradic suggestions. Or use the Five-Color Palette Generator to explore presets including pastel, vibrant, earthy, dark, and monochrome. Test text contrast before putting the palette into production.

How do I create a CSS gradient with two or three colors?

Open the CSS Gradient Builder, choose linear, radial, or conic mode, and set your start and end colors. Enable the middle color stop if you want a third color. Adjust the angle or stop position, preview the result, and copy the generated CSS.

What contrast ratio should website text have?

Under WCAG 2.x, Level AA generally calls for at least 4.5:1 for normal text and 3:1 for large text. Level AAA calls for at least 7:1 for normal text. Some exceptions apply, and overall accessibility requires more than passing a contrast check.

Can I extract HEX colors from a photo?

Yes. Add an image in the Image Color Extractor to generate up to six representative swatches. You can also click on a pixel in the image to select its color, or send extracted colors to the palette generator. The extraction is performed in your browser rather than uploading the image to an image-processing service.

What are tints, shades, and tones?

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. These variations help build coherent interface colors for text, surfaces, hover states, and borders. The studio generates nine swatches for each of these three approaches.

Does CSS recognize color names such as coral and rebeccapurple?

Yes. CSS includes 148 standard named color keywords, including alternate spellings such as gray and grey. The studio's searchable Color Names Library lets you find each keyword and its corresponding HEX color.

Is CMYK conversion accurate for professional printing?

The studio shows an approximate CMYK conversion calculated from sRGB values. Professional printing depends on paper, inks, devices, and color profiles, so a print-ready conversion should use a color-managed workflow rather than relying on a basic online formula.

Is UtilityGlen HTML Color Codes Studio free?

Yes. The color picker, format converter, wheel, harmonies, gradient maker, contrast checker, palette tools, image color extractor, and named-color library can be used in your browser without creating an account. Saved favorite colors are stored in the current browser when storage is available.

Your next great color starts here

Stop guessing shades. Start making things.

Explore a color, watch it become a palette, build a gradient, check its contrast, and copy the code into your next website. Your whole workflow lives on one page.

Back to the color picker
UtilityGlen

Handy web tools for daily use. Everything runs right in your browser—no sign-ups, no cloud uploads, and your data stays entirely on your device.

Tools Categories Contact Us Report a Bug Privacy Policy