calculadoras.tools
Programacion

Paleta HEX, RGB y HSL

Convert colors for CSS, generate a 50–900 scale and check WCAG contrast in one tool.

Color for CSS

Convert and export your palette

RGB
R G B
HSL
H S L

Contraste WCAG

Ratio 7.58:1
Nivel AAA
Texto sugerido #000000

Negro: 7.58:1 / Blanco: 2.77:1

Escala 50-900

50

#ECF8FD

100

#D8F1FB

200

#B2E2F8

300

#8BD4F4

400

#51BEEF

500

#0EA5E9

600

#0C91CD

700

#0A77A8

800

#085C82

900

#06425D

CSS variables

--color-primary 

:root {
  --color-primary: #0EA5E9;
  --color-primary-rgb: 14 165 233;
  --color-primary-hsl: 199 89% 48%;
  --color-primary-50: #ECF8FD;
  --color-primary-100: #D8F1FB;
  --color-primary-200: #B2E2F8;
  --color-primary-300: #8BD4F4;
  --color-primary-400: #51BEEF;
  --color-primary-500: #0EA5E9;
  --color-primary-600: #0C91CD;
  --color-primary-700: #0A77A8;
  --color-primary-800: #085C82;
  --color-primary-900: #06425D;
}

.button-primary {
  background: var(--color-primary);
  color: #000000;
}
Publicidad

Ejemplos rapidos

Common colors for interfaces and product states.

Color in CSS

HEX is compact, RGB maps directly to channels, and HSL is often more convenient for adjusting hue, saturation and lightness.

HEX

Each pair defines red, green and blue in base 16. It is common in tokens, style guides and CSS stylesheets.

RGB

Uses channels from 0 to 255. Modern syntax lets you store channels as variables and apply transparency afterwards.

HSL

Separates hue, saturation and lightness. It is useful for creating lighter and darker variants of a base color.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

HEX represents colors with hexadecimal values, RGB uses red, green and blue channels from 0 to 255, and HSL organizes color by hue, saturation and lightness.

How do I convert HEX to RGB?

Each hexadecimal pair converts to decimal: the first two digits are red, the next two green and the last two blue.

How do I generate CSS variables from a color?

The tool takes the base color, calculates its HEX, RGB and HSL values, generates a 50–900 scale and builds CSS declarations with your chosen variable name.

What is a 50–900 color scale?

It is a family of shades where 500 is usually the base color, lower steps are lighter and higher steps are darker.

What is WCAG contrast?

It is a numerical relationship between the text color and background color. For normal text, AA requires at least 4.5:1 and AAA at least 7:1.

Which text color works best on a background?

The calculator compares white and black on the selected background and recommends the one with the higher contrast.

Can I share a palette by URL?

Yes. The page updates parameters such as color, name, bg and text so you can copy a link with the current settings.