What is the difference between HEX and RGB?

HEX and RGB represent the same color space but in different notation. HEX uses a six-digit hexadecimal code (like #2563EB), while RGB uses three decimal values from 0 to 255 (like rgb(37, 99, 235)). They are interchangeable and represent the exact same range of colors.

HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on the color wheel (0-360 degrees), Saturation is the color intensity (0-100%), and Lightness is how light or dark the color is (0-100%). HSL is often more intuitive for humans to work with when adjusting colors.

Which color format should I use in CSS?

All three formats (HEX, RGB, HSL) work in CSS. HEX is the most compact and widely used. RGB is useful when you need to calculate or animate individual color channels. HSL is best when you need to create color variations by adjusting lightness or saturation, like generating lighter or darker versions of a brand color.

Toolts›Selector de Colores

Selector de Colores

Elegí colores y convertí entre HEX, RGB y HSL.

#2563EB

R 37

G 99

B 235

HEX

RGB

HSL

CSS Variables

Contrast Preview

White text

Black text

Selector de Colores y Convertidor Online Gratis

El Selector de Colores de Toolts te permite elegir cualquier color y ver instantáneamente su representación en los tres formatos de color web más usados: HEX, RGB y HSL. Podés elegir un color visualmente, ajustar canales RGB individuales con controles deslizantes o escribir un valor HEX directamente. Todas las conversiones ocurren instantáneamente en tu navegador.

Entendiendo los Formatos de Color

HEX (hexadecimal) es el formato de color más usado en desarrollo web. Un color HEX consiste en un símbolo hash seguido de seis dígitos hexadecimales, donde los primeros dos representan rojo, los dos del medio verde y los últimos dos azul. Cada par va de 00 (ninguno) a FF (máximo). Por ejemplo, #FF0000 es rojo puro, #00FF00 es verde puro y #0000FF es azul puro.

RGB (Rojo, Verde, Azul) representa colores como tres valores decimales de 0 a 255. Describe el mismo espacio de color que HEX pero en un formato más fácil para cálculos y manipulación en JavaScript y animaciones CSS. Por ejemplo, rgb(255, 0, 0) es el mismo rojo puro que #FF0000.

HSL (Tono, Saturación, Luminosidad) describe el color en términos más intuitivos para humanos. El tono es el ángulo en la rueda de color (0° es rojo, 120° es verde, 240° es azul). La saturación controla la intensidad del color de gris (0%) a vívido (100%). La luminosidad va de negro (0%) a blanco (100%) con el color puro al 50%. HSL facilita crear variaciones — ajustá la luminosidad para tintes y sombras, o reducí la saturación para tonos apagados.

Elegir Colores para Diseño Web

Al seleccionar colores para un sitio web o aplicación, considerá el contraste y la accesibilidad. Las Pautas de Accesibilidad de Contenido Web (WCAG) recomiendan una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande. Usá la vista previa de contraste para verificar si texto blanco o negro es más legible sobre tu color elegido. Un buen punto de partida es elegir un color de marca principal, luego generar variaciones más claras y oscuras usando HSL ajustando la luminosidad.

Preguntas Frecuentes

HEX y RGB representan el mismo espacio de color en notación diferente. HEX usa un código hexadecimal de seis dígitos (#2563EB), mientras RGB usa tres valores decimales 0–255 (rgb(37, 99, 235)). Producen colores idénticos y son totalmente intercambiables.

>HSL significa Tono, Saturación, Luminosidad. El tono es el ángulo de color (0–360°), la saturación es la intensidad (0–100%) y la luminosidad es el brillo (0–100%). Es más intuitivo para humanos al ajustar colores, especialmente para crear tintes, sombras y variaciones apagadas.

Los tres funcionan en CSS. HEX es el más compacto y popular. RGB es útil para animaciones o calcular valores de canales. HSL es mejor para generar variaciones de color (más claro/oscuro) ajustando la luminosidad.

Herramientas Relacionadas

🔤

Convertidor de Mayúsculas

Convertí texto a mayúsculas, minúsculas y más.

🔐

Generador de Contraseñas

Generá contraseñas seguras y aleatorias al instante.

✏️

Contador de Palabras

Contá palabras, caracteres, oraciones y párrafos.