← Back to all tools

Goodfolk Design Utilities

HEX Color Converter

Convert HEX colors to RGB and HSL, preview the color, and copy CSS-ready values.

Enter a 3-digit or 6-digit HEX color, with or without the # symbol. Example: #3B82F6, 3B82F6, or 3BF.

Preview

#3B82F6

Color values

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

CSS snippets

CSS variable

--color-brand: #3B82F6;

Background

background-color: #3B82F6;

Text color

color: #3B82F6;

Border color

border-color: #3B82F6;

Related tools

Color Contrast Checker

Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.

Color Palette Generator

Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.

CSS Gradient Generator

Create linear CSS gradients, preview them, and copy ready-to-use CSS.