• Omnilude ToolsColección de herramientas en línea
  • Inicio
Herramientas en línea
  • Herramientas de desarrollo
    • Generador de UUID
    • Conversor de Timestamp
    • Codificador/Decodificador
    • Selector de Color
    • Probador de regex
    • Conversor de Datos
    • Generador de hash
    • Expresión Cron
    • Convención de Nomenclatura
    • Depurador JWT
    • Información del Navegador
    • Conversión de bases
    • Generador de Meta Tags
    • Contraseña
  • Herramientas de texto
  • Herramientas útiles
  • Herramientas de Tiempo
  • Herramientas de cálculo

Selector de Color

Convertir códigos de color

Actualizaciones

Mejoras publicadas recientemente

Nuevo
Cambiar tema
Modo claro
Modo oscuro
Sistema

Seleccionar Color

R
G
B

Valores de Color

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Paleta de Colores

Clic para seleccionar y copiar
base

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

Formatos de Color

HEX

Formato #RRGGBB. El más usado en CSS

RGB

Rojo, Verde, Azul (0-255)

HSL

Tono, Saturación, Luminosidad. Ajuste intuitivo de color

HSV/HSB

Tono, Saturación, Valor. Usado en herramientas gráficas

OKLCH

Espacio de color CSS moderno perceptualmente uniforme

RGBA/HSLA

Incluye canal alfa (transparencia)

¿Qué es un selector de colores?

El selector de colores (Color Picker) es una herramienta en línea que permite convertir códigos entre diversos modelos de color y seleccionar colores visualmente. Los códigos de color precisos son esenciales en el desarrollo web, diseño UI/UX y diseño gráfico. Esta herramienta admite los principales formatos de color como HEX, RGB, HSL, HSV y OKLCH, y permite explorar colores mediante controles deslizantes intuitivos y paletas, además de copiar códigos instantáneamente. También admite el canal alfa (transparencia) para trabajar con colores semitransparentes.

  • Conversión mutua entre 5 formatos de color: HEX, RGB, HSL, HSV y OKLCH
  • Selector intuitivo con deslizadores de color y área de selección de color
  • Compatibilidad con el ajuste del canal alfa (transparencia)
  • Copia del código de color con un solo clic
  • Función de generación de colores aleatorios
  • Paletas de colores básicas y avanzadas incluidas

Cómo usar

  1. 1

    Seleccionar un color

    Arrastre el deslizador de color o haga clic en el área de selección de color para elegir el color deseado. También puede introducir directamente un código HEX u otro formato.

  2. 2

    Verificar los formatos

    El color seleccionado se convierte automáticamente y se muestra en todos los formatos: HEX, RGB, HSL, HSV y OKLCH.

  3. 3

    Ajustar la transparencia

    En la pestaña alfa puede ajustar la transparencia en un rango de 0 a 100 % para crear colores semitransparentes.

  4. 4

    Copiar el código

    Al hacer clic en el valor del formato de color que necesite, se copiará automáticamente al portapapeles. Péguelo directamente en su CSS, herramientas de diseño, etc.

Preguntas frecuentes

HEX es una notación hexadecimal en formato #RRGGBB, la más comúnmente utilizada en CSS. RGB expresa el color mediante la combinación de rojo (0-255), verde (0-255) y azul (0-255). HSL lo expresa mediante tono (Hue, 0-360), saturación (Saturation, 0-100 %) y luminosidad (Lightness, 0-100 %), siendo el más cercano a la percepción intuitiva humana.

OKLCH es un espacio de color CSS moderno perceptualmente uniforme (perceptually uniform). En el HSL tradicional, incluso con la misma saturación y luminosidad, el brillo percibido variaba según el tono. OKLCH resuelve este problema, lo que lo hace ventajoso para generar paletas de colores consistentes. Está incluido en el estándar CSS Color Level 4.

El valor alfa es un número entre 0 (completamente transparente) y 1 (completamente opaco) que indica la transparencia del color. En CSS se utiliza como rgba(59, 130, 246, 0.5), y en HEX se añaden 2 dígitos al final como #3B82F680. Se emplea en superposiciones, sombras, fondos, entre otros.

Según las directrices WCAG 2.1, la relación de contraste de luminosidad entre el texto y el fondo debe ser de al menos 4,5:1 para texto normal y 3:1 para texto grande. Al seleccionar colores, es importante verificar el contraste con el color de fondo para garantizar que las personas con discapacidad visual también puedan leer el contenido.

Al introducir en esta herramienta el código HEX copiado de herramientas de diseño como Figma o Sketch, se convierte automáticamente a formatos utilizables en CSS como RGB y HSL. Gestionar los colores mediante variables CSS facilita el cambio de tema, y el formato HSL es conveniente para ajustar la luminosidad y la saturación.

Consejos

  • Con el formato HSL, ajustando solo la luminosidad (L) puede crear fácilmente variaciones claras y oscuras del mismo color, lo que resulta ventajoso para el trabajo con colores de tema.
  • Obtenga inspiración con la función de color aleatorio y luego realice ajustes finos con el deslizador de color para crear paletas creativas.
  • Al usarlo junto con CSS custom properties (variables), el cambio de colores entre modo oscuro y modo claro resulta sencillo.
  • Haga clic en los colores de uso frecuente de la paleta de colores para copiar rápidamente su código.
  • Utilice el formato OKLCH para diseñar un sistema de colores con saturación y brillo perceptualmente consistentes.

Omnilude Tools

Colección de herramientas en línea gratuitas para desarrolladores, diseñadores y creadores. Todos los datos se procesan localmente en su navegador.

Herramientas de desarrollo

  • Generador de UUID
  • Conversor de Timestamp
  • Codificador/Decodificador
  • Selector de Color

Herramientas de texto

  • Editor JSON
  • Comparar texto
  • Contador de texto
  • Markdown

Aviso legal

  • Política de privacidad
  • Términos de uso
  • Acerca del servicio

© 2026 Omnilude. Todos los derechos reservados.

Enviar comentarios