Selector de colores para html y css

Nuestra herramienta de selección de colores web te permite obtener el código de color html perfecto para tu sitio web de forma fácil y sencilla, solamente desplazando el cursor por la barra obtienes el color en hexadecimal, rgb y hsl.

También genera un esquema de color monocromático de cada color seleccionado, de esta forma hacemos que encontrar el color ideal para tu sitio no sea una pesadilla. Y si no es suficiente con nuestro color picker puedes navegar a través de nuestros articulos y ver las diferentes variantes de cada color o ir a paleta de colores y generar paletas de colores con códigos html para todos tus proyectos.

Paleta de colores html

#004a93
#175ca8
#266fbd
#3482d3
#5e9be3
#91bbed
#bcddf6
#e5ffff

Tutoriales para aprender como poner colores en tu página web con css

Formato de colores que acepta html ¿Cuáles son? y ¿qué significa cada tipo de código?

Cuando hablamos de colores en html nos referimos a los distintos formatos y nombres usados para asignar colores a los elementos de una página web como el texto, los bordes o los fondos. Html soporta al menos 6 formas diferentes para agregar color a una página web, estos formatos son:

  • Color en formato hexadecimal

  • Color en formato rgb,

  • Color en formato rgba,

  • Color en formato hsl,

  • Color en formato hsla,

También acepta los nombres de algunos colores escritos en inglés más adelante tienes una tabla con la lista de todos los códigos de colores html con sus nombres.

A continuación te explicaremos que significa cada modelo o formato, para que adquieras las bases fundamentales de la aplicación del color en el mundo digital.

Códigos de colores RGB

RGB hace referencia a las siglas en inglés de red, green y blue, en español rojo, verde y azul. Todas las pantallas presentes en los dispositivos modernos trabajan con este formato, los pixeles dentro de las pantallas tienen al menos un punto o fracción de alguno de los tres colores mencionados anteriormente dependiendo de los valores que tengan se pueden obtener todos los colores posibles.

Cada color dentro del modelo rgb tiene 256 variaciones siendo 0 su valor mínimo y 255 el máximo, entonces te preguntarás ¿Cuantas combinaciones de colores rgb existen?. pues la respuesta es bastante abrumadora, puedes obtener hasta 16 millones de colores diferentes.

Esta notación es la que entiendes las computadoras y a través de ella se envía información al monitor y este muestra en la pantalla el color adecuado.

A continuación veamos algunos ejemplos para mostrar como funciona el modelo de color rgb. En la siguiente tabla tienes algunos colores observa como cada valor es variable dependiendo de su presencia en el código, en el color rojo vez como es mayor el valor de red, y en el azul igual.

Ejemplo de formato rgb

ColorNombreRGB
rojorgb(255,0,0)
dodgerbluergb(30,144,255)
mediumspringgreenrgb(0,250,154)
deeppinkrgb(255,20,147)
orangergb(255,165,0)
grayrgb(128,128,128)

Para que lo entiendas mejor aquí tienes una explicacion de por que obtenemos esos valores.

  • El color rojo lo conseguimos usando el máximo valor 255 en la propiedad red y 0 en blue y green.

  • El color verde lo conseguimos usando el máximo valor 255 en la propiedad green y 0 en blue y red. En este caso como no es un verde intenso agregamos algo de colo azul con lo que logramos que se acerque al cyan.

  • El color Azul lo conseguimos usando el máximo valor 255 en la propiedad blue y 0 en red y green. El azul de esta tabla lo obtenemos agregando un poco de rojo y de verde manteniendo como predominante el canal azul.

  • El negro es la ausencia de los tres canales, el blanco lo puedes obtener con los tres canales en su valor máximo es decir rgb(255,255,255).

Códigos de Colores RGBA o transparentes

Es igual al formato rgb pero con un canal alpha que permite agregar transparencia, es ideal para obtener colores que generen sensación de ser transparente y permiten que elementos por debajo de ellos puedan distinguirse, el valor mínimo del canal alpha es 0 lo cual lo haŕa totalmente transparente y máximo 1 que es el color en su estado normal.

Ejemplo de formato rgba

ColorNombreRGBA
rojorgba(255,0,0,0.7)
dodgerbluergba(30,144,255,0.7)
mediumspringgreenrgba(0,250,154,0.7)
deeppinkrgba(255,20,147,0.7)
orangergba(255,165,0,0.7)
grayrgba(128,128,128,0.7)

Aunque en la tabla anterior no notes la diferencia entre el formato rgb y el rgba una vez lo apliques en tu html notarás que el color rgba es transparente. Dependiendo del valor que asignes en el canal alpha.

Códios de Colores hexadecimales

Seguramente alguna vez te has echo la pregunta ¿cuál es el significado de los números hexadecimales en los códigos de color?, o ¿qué es un color hexadecimal? el sistema de color hexadecimal más conocido como hex esta compuesto por un símbolo de hashtag o gato y seis letras o números, los dos primeros valores corresponden al color rojo, el verde lo representan el los caracteres 3 y 4, por ultimo el valor del azul son los últimos dos dígitos.

Este formato sigue la misma lógica que que el rgb solo que su escritura es muy diferente. A continuación la explicaremos.

Los colores hexadecimales están compuestos por números del sistema decimal es decir del 0 al 9 y para expresar valores mayores a estos se usan las primeras 6 letras del alfabeto inglés es decir ABCDEF, donde A es equivalente a 10 y así sucesivamente con cada valor hasta llegar al 15.

Pero todavía es algo confuso, si recuerdas el formato rgb esta compuesto por 256 variaciones en cada canal, lo mismo ocurre con modelo hexadecimal. Te preguntarás ¿cómo consigo estás 256 variantes para cada canal de color?. La fórmula para conseguir este resultado es la siguiente. El primer valor multiplicado por 16 sumadole el segundo valor multiplicado por 1, Siguiendo está sencilla formula puedes obtener el valor para los tres canales rojo, verde, y azul.

Por ejemplo para conseguir el color rojo hacemos lo siguiente, sabemos que el rojo en rgb es (255,0,0) a partir de esto necesitamos obtener ese usando la formula anterior,

  • El primer valor de nuestro código hexadecimal sera la letra F = 15.

  • Al multiplicar 15 \ 16 obtenemos 240.

  • El segundo valor del color rojo en formato hexadecimal es la F que multiplicada por 1 seria 15,

  • La suma de 240 + 15 nos da 255 obteniendo el canal rojo.

  • Los demás dígitos del color rojo hexadecimal son ceros por que hay ausencia de los otros canales.

A continuación tienes una tabla con algunos colores en formato hexadecimal miralos y nota como se diferencian unos de otros.

Ejemplo color hex

ColorNombreHEXADECIMAL
rojo#ff0000
dodgerblue#1e90ff
mediumspringgreen#00fa9a
deeppink#ff1493
orange#ffa500
gray#808080

A pesar de que los modelos anteriores son los más utilizados, estos pueden ser bastante confusos de entender para el ser humano, es muy difícil acertar que color saldrá cuando escribimos un código rgb, rgba o hex, aunque esto realmente no representa ningún problema pues existen infinidad de herramientas online que te permiten escoger de manera visual cualquier color con sus diferentes códigos.

Código de color hsl

Este el el formato de colores de html más fácil de entender ya que su nomenclatura es bastante específica y sencilla. Esta compuesta por los siguientes valores (hue,saturation,lightness).

  • Hue: Es el tono del color va desde 0 a 360 grados, tomando como referencia los colores del circulo cromático o rueda de colores empezando desde 0 que es el equivalente al rojo y terminando en le magenta que eqivales a 300.

  • Saturation: Es la intensidad del color y esta escala va desde gris hasta conseguir el color completamente puro. con el valor de la intensidad en 0% obtendríamos un tonos gris y 100% el color puro.

  • Lightness: Es la cantidad de luz en el color, 0% es negro y 100% es blanco, el color puro esta en 50%.

NOTA Los 6 colores principales por los que esta formada el circulo cromático son:

A partir de la mezcla de estos colores principales obtenemos un sin fin de otros tipos de colores como el morado, turquesa, dorado o el color café.

rueda de colores hsl

Ejemplos de códigos hsl

ColorNombreHSL
rojohsl(0,100%,50%)
dodgerbluehsl(210,100%,56%)
mediumspringgreenhsl(157,100%,50%)
deeppinkhsl(328,100%,54%)
orangehsl(39,100%,50%)
grayhsl(0,0%,51%)

Este formato es muy amigable con los seres humanos y bastante práctico, también existe el formato hsla pero al igual que rgba sigue las mismas reglas agregando un canal alpha con un valor minimo de 0 y máximo de 1. El formato hsla es igual al hsl pero le agregamos una canal alpha que va desde 0 a 1 dependiendo de la transparencia que le queramos agregar al color.

Tabla de colores html - css

ColorNombreHEXRGBRGBAHSL
indianred#cd5c5crgb(205,92,92)rgba(205,92,92,0.8)hsl(0,54%,59%)
lightcoral#f08080rgb(240,128,128)rgba(240,128,128,0.8)hsl(0,79%,73%)
salmon#fa8072rgb(250,128,114)rgba(250,128,114,0.8)hsl(7,94%,72%)
darksalmon#e9967argb(233,150,122)rgba(233,150,122,0.8)hsl(16,72%,70%)
lightsalmon#ffa07argb(255,160,122)rgba(255,160,122,0.8)hsl(18,100%,74%)
crimson#dc143crgb(220,20,60)rgba(220,20,60,0.8)hsl(348,84%,48%)
red#ff0000rgb(255,0,0)rgba(255,0,0,0.8)hsl(0,100%,50%)
firebrick#b22222rgb(178,34,34)rgba(178,34,34,0.8)hsl(0,68%,42%)
darkred#8b0000rgb(139,0,0)rgba(139,0,0,0.8)hsl(0,100%,28%)
cyan#00ffffrgb(0,255,255)rgba(0,255,255,0.8)hsl(180,100%,50%)
lightcyan#e0ffffrgb(224,255,255)rgba(224,255,255,0.8)hsl(180,100%,94%)
paleturquoise#afeeeergb(175,238,238)rgba(175,238,238,0.8)hsl(180,65%,81%)
aquamarine#7fffd4rgb(127,255,212)rgba(127,255,212,0.8)hsl(160,100%,75%)
turquoise#40e0d0rgb(64,224,208)rgba(64,224,208,0.8)hsl(174,73%,57%)
mediumturquoise#48d1ccrgb(72,209,204)rgba(72,209,204,0.8)hsl(178,60%,56%)
darkturquoise#00ced1rgb(0,206,209)rgba(0,206,209,0.8)hsl(181,100%,41%)
cadetblue#5f9ea0rgb(95,158,160)rgba(95,158,160,0.8)hsl(182,26%,50%)
steelblue#4682b4rgb(70,130,180)rgba(70,130,180,0.8)hsl(208,44%,50%)
lightsteelblue#b0c4dergb(176,196,222)rgba(176,196,222,0.8)hsl(214,42%,79%)
powderblue#b0e0e6rgb(176,224,230)rgba(176,224,230,0.8)hsl(187,52%,80%)
lightblue#add8e6rgb(173,216,230)rgba(173,216,230,0.8)hsl(195,54%,80%)
skyblue#87ceebrgb(135,206,235)rgba(135,206,235,0.8)hsl(198,72%,73%)
lightskyblue#87cefargb(135,206,250)rgba(135,206,250,0.8)hsl(203,92%,76%)
deepskyblue#00bfffrgb(0,191,255)rgba(0,191,255,0.8)hsl(196,100%,50%)
dodgerblue#1e90ffrgb(30,144,255)rgba(30,144,255,0.8)hsl(210,100%,56%)
cornflowerblue#6495edrgb(100,149,237)rgba(100,149,237,0.8)hsl(219,80%,67%)
mediumslateblue#7b68eergb(123,104,238)rgba(123,104,238,0.8)hsl(249,80%,68%)
royalblue#4169e1rgb(65,105,225)rgba(65,105,225,0.8)hsl(225,73%,57%)
blue#0000ffrgb(0,0,255)rgba(0,0,255,0.8)hsl(240,100%,50%)
mediumblue#0000cdrgb(0,0,205)rgba(0,0,205,0.8)hsl(240,100%,41%)
darkblue#00008brgb(0,0,139)rgba(0,0,139,0.8)hsl(240,100%,28%)
navy#000080rgb(0,0,128)rgba(0,0,128,0.8)hsl(240,100%,26%)
midnightblue#191970rgb(25,25,112)rgba(25,25,112,0.8)hsl(240,64%,27%)
greenyellow#adff2frgb(173,255,47)rgba(173,255,47,0.8)hsl(84,100%,60%)
chartreuse#7fff00rgb(127,255,0)rgba(127,255,0,0.8)hsl(91,100%,50%)
lawngreen#7cfc00rgb(124,252,0)rgba(124,252,0,0.8)hsl(91,100%,50%)
lime#00ff00rgb(0,255,0)rgba(0,255,0,0.8)hsl(120,100%,50%)
limegreen#32cd32rgb(50,205,50)rgba(50,205,50,0.8)hsl(120,61%,50%)
palegreen#98fb98rgb(152,251,152)rgba(152,251,152,0.8)hsl(120,93%,80%)
lightgreen#90ee90rgb(144,238,144)rgba(144,238,144,0.8)hsl(120,74%,75%)
mediumspringgreen#00fa9argb(0,250,154)rgba(0,250,154,0.8)hsl(157,100%,50%)
springgreen#00ff7frgb(0,255,127)rgba(0,255,127,0.8)hsl(150,100%,50%)
mediumseagreen#3cb371rgb(60,179,113)rgba(60,179,113,0.8)hsl(147,50%,47%)
seagreen#2e8b57rgb(46,139,87)rgba(46,139,87,0.8)hsl(147,51%,37%)
forestgreen#228b22rgb(34,139,34)rgba(34,139,34,0.8)hsl(120,61%,34%)
green#008000rgb(0,128,0)rgba(0,128,0,0.8)hsl(120,100%,26%)
darkgreen#006400rgb(0,100,0)rgba(0,100,0,0.8)hsl(120,100%,20%)
yellowgreen#9acd32rgb(154,205,50)rgba(154,205,50,0.8)hsl(80,61%,50%)
olivedrab#6b8e23rgb(107,142,35)rgba(107,142,35,0.8)hsl(80,61%,35%)
olive#808000rgb(128,128,0)rgba(128,128,0,0.8)hsl(60,100%,26%)
darkolivegreen#556b2frgb(85,107,47)rgba(85,107,47,0.8)hsl(82,39%,31%)
mediumaquamarine#66cdaargb(102,205,170)rgba(102,205,170,0.8)hsl(160,51%,61%)
darkseagreen#8fbc8frgb(143,188,143)rgba(143,188,143,0.8)hsl(120,26%,65%)
lightseagreen#20b2aargb(32,178,170)rgba(32,178,170,0.8)hsl(177,70%,42%)
darkcyan#008b8brgb(0,139,139)rgba(0,139,139,0.8)hsl(180,100%,28%)
teal#008080rgb(0,128,128)rgba(0,128,128,0.8)hsl(180,100%,26%)
pink#ffc0cbrgb(255,192,203)rgba(255,192,203,0.8)hsl(350,100%,88%)
lightpink#ffb6c1rgb(255,182,193)rgba(255,182,193,0.8)hsl(351,100%,86%)
hotpink#ff69b4rgb(255,105,180)rgba(255,105,180,0.8)hsl(330,100%,71%)
deeppink#ff1493rgb(255,20,147)rgba(255,20,147,0.8)hsl(328,100%,54%)
mediumvioletred#c71585rgb(199,21,133)rgba(199,21,133,0.8)hsl(323,81%,44%)
palevioletred#db7093rgb(219,112,147)rgba(219,112,147,0.8)hsl(341,60%,65%)
cornsilk#fff8dcrgb(255,248,220)rgba(255,248,220,0.8)hsl(48,100%,94%)
blanchedalmond#ffebcdrgb(255,235,205)rgba(255,235,205,0.8)hsl(36,100%,91%)
bisque#ffe4c4rgb(255,228,196)rgba(255,228,196,0.8)hsl(33,100%,89%)
navajowhite#ffdeadrgb(255,222,173)rgba(255,222,173,0.8)hsl(36,100%,84%)
wheat#f5deb3rgb(245,222,179)rgba(245,222,179,0.8)hsl(40,77%,84%)
burlywood#deb887rgb(222,184,135)rgba(222,184,135,0.8)hsl(34,57%,70%)
tan#d2b48crgb(210,180,140)rgba(210,180,140,0.8)hsl(35,44%,69%)
rosybrown#bc8f8frgb(188,143,143)rgba(188,143,143,0.8)hsl(0,26%,65%)
sandybrown#f4a460rgb(244,164,96)rgba(244,164,96,0.8)hsl(28,88%,67%)
goldenrod#daa520rgb(218,165,32)rgba(218,165,32,0.8)hsl(43,75%,50%)
darkgoldenrod#b8860brgb(184,134,11)rgba(184,134,11,0.8)hsl(43,89%,39%)
peru#cd853frgb(205,133,63)rgba(205,133,63,0.8)hsl(30,59%,53%)
chocolate#d2691ergb(210,105,30)rgba(210,105,30,0.8)hsl(25,75%,48%)
saddlebrown#8b4513rgb(139,69,19)rgba(139,69,19,0.8)hsl(25,76%,31%)
sienna#a0522drgb(160,82,45)rgba(160,82,45,0.8)hsl(20,57%,41%)
brown#a52a2argb(165,42,42)rgba(165,42,42,0.8)hsl(0,60%,41%)
maroon#800000rgb(128,0,0)rgba(128,0,0,0.8)hsl(0,100%,26%)
lightsalmon#ffa07argb(255,160,122)rgba(255,160,122,0.8)hsl(18,100%,74%)
coral#ff7f50rgb(255,127,80)rgba(255,127,80,0.8)hsl(17,100%,66%)
tomato#ff6347rgb(255,99,71)rgba(255,99,71,0.8)hsl(10,100%,64%)
orangered#ff4500rgb(255,69,0)rgba(255,69,0,0.8)hsl(17,100%,50%)
darkorange#ff8c00rgb(255,140,0)rgba(255,140,0,0.8)hsl(33,100%,50%)
orange#ffa500rgb(255,165,0)rgba(255,165,0,0.8)hsl(39,100%,50%)
gold#ffd700rgb(255,215,0)rgba(255,215,0,0.8)hsl(51,100%,50%)
yellow#ffff00rgb(255,255,0)rgba(255,255,0,0.8)hsl(60,100%,50%)
lightyellow#ffffe0rgb(255,255,224)rgba(255,255,224,0.8)hsl(60,100%,94%)
lightgoldenrodyellow#fafad2rgb(250,250,210)rgba(250,250,210,0.8)hsl(60,81%,91%)
lemonchiffon#fffacdrgb(255,250,205)rgba(255,250,205,0.8)hsl(54,100%,91%)
papayawhip#ffefd5rgb(255,239,213)rgba(255,239,213,0.8)hsl(38,100%,92%)
moccasin#ffe4b5rgb(255,228,181)rgba(255,228,181,0.8)hsl(39,100%,86%)
peachpuff#ffdab9rgb(255,218,185)rgba(255,218,185,0.8)hsl(29,100%,87%)
palegoldenrod#eee8aargb(238,232,170)rgba(238,232,170,0.8)hsl(55,67%,80%)
khaki#f0e68crgb(240,230,140)rgba(240,230,140,0.8)hsl(54,77%,75%)
darkkhaki#bdb76brgb(189,183,107)rgba(189,183,107,0.8)hsl(56,39%,59%)
lavender#e6e6fargb(230,230,250)rgba(230,230,250,0.8)hsl(240,67%,95%)
thistle#d8bfd8rgb(216,191,216)rgba(216,191,216,0.8)hsl(300,25%,80%)
plum#dda0ddrgb(221,160,221)rgba(221,160,221,0.8)hsl(300,48%,75%)
violet#ee82eergb(238,130,238)rgba(238,130,238,0.8)hsl(300,77%,73%)
orchid#da70d6rgb(218,112,214)rgba(218,112,214,0.8)hsl(303,59%,65%)
fuchsia#ff00ffrgb(255,0,255)rgba(255,0,255,0.8)hsl(300,100%,50%)
magenta#ff00ffrgb(255,0,255)rgba(255,0,255,0.8)hsl(300,100%,50%)
mediumorchid#ba55d3rgb(186,85,211)rgba(186,85,211,0.8)hsl(289,59%,59%)
mediumpurple#9370dbrgb(147,112,219)rgba(147,112,219,0.8)hsl(260,60%,65%)
blueviolet#8a2be2rgb(138,43,226)rgba(138,43,226,0.8)hsl(272,76%,53%)
darkviolet#9400d3rgb(148,0,211)rgba(148,0,211,0.8)hsl(283,100%,42%)
darkorchid#9932ccrgb(153,50,204)rgba(153,50,204,0.8)hsl(281,61%,50%)
darkmagenta#8b008brgb(139,0,139)rgba(139,0,139,0.8)hsl(300,100%,28%)
purple#800080rgb(128,0,128)rgba(128,0,128,0.8)hsl(300,100%,26%)
indigo#4b0082rgb(75,0,130)rgba(75,0,130,0.8)hsl(275,100%,26%)
slateblue#6a5acdrgb(106,90,205)rgba(106,90,205,0.8)hsl(249,54%,58%)
darkslateblue#483d8brgb(72,61,139)rgba(72,61,139,0.8)hsl(249,39%,40%)
gainsboro#dcdcdcrgb(220,220,220)rgba(220,220,220,0.8)hsl(0,0%,87%)
lightgrey#d3d3d3rgb(211,211,211)rgba(211,211,211,0.8)hsl(0,0%,83%)
silver#c0c0c0rgb(192,192,192)rgba(192,192,192,0.8)hsl(0,0%,76%)
darkgray#a9a9a9rgb(169,169,169)rgba(169,169,169,0.8)hsl(0,0%,67%)
gray#808080rgb(128,128,128)rgba(128,128,128,0.8)hsl(0,0%,51%)
dimgray#696969rgb(105,105,105)rgba(105,105,105,0.8)hsl(0,0%,42%)
lightslategray#778899rgb(119,136,153)rgba(119,136,153,0.8)hsl(210,15%,54%)
slategray#708090rgb(112,128,144)rgba(112,128,144,0.8)hsl(210,13%,51%)
darkslategray#2f4f4frgb(47,79,79)rgba(47,79,79,0.8)hsl(180,26%,25%)
black#000000rgb(0,0,0)rgba(0,0,0,0.8)hsl(0,0%,0%)
white#ffffffrgb(255,255,255)rgba(255,255,255,0.8)hsl(0,0%,100%)
snow#fffafargb(255,250,250)rgba(255,250,250,0.8)hsl(0,100%,100%)
honeydew#f0fff0rgb(240,255,240)rgba(240,255,240,0.8)hsl(120,100%,98%)
mintcream#f5fffargb(245,255,250)rgba(245,255,250,0.8)hsl(150,100%,99%)
azure#f0ffffrgb(240,255,255)rgba(240,255,255,0.8)hsl(180,100%,98%)
aliceblue#f0f8ffrgb(240,248,255)rgba(240,248,255,0.8)hsl(208,100%,98%)
ghostwhite#f8f8ffrgb(248,248,255)rgba(248,248,255,0.8)hsl(240,100%,99%)
whitesmoke#f5f5f5rgb(245,245,245)rgba(245,245,245,0.8)hsl(0,0%,97%)
seashell#fff5eergb(255,245,238)rgba(255,245,238,0.8)hsl(25,100%,97%)
beige#f5f5dcrgb(245,245,220)rgba(245,245,220,0.8)hsl(60,56%,92%)
oldlace#fdf5e6rgb(253,245,230)rgba(253,245,230,0.8)hsl(40,86%,95%)
floralwhite#fffaf0rgb(255,250,240)rgba(255,250,240,0.8)hsl(40,100%,98%)
ivory#fffff0rgb(255,255,240)rgba(255,255,240,0.8)hsl(60,100%,98%)
antiquewhite#faebd7rgb(250,235,215)rgba(250,235,215,0.8)hsl(35,78%,92%)
linen#faf0e6rgb(250,240,230)rgba(250,240,230,0.8)hsl(30,67%,95%)
lavenderblush#fff0f5rgb(255,240,245)rgba(255,240,245,0.8)hsl(340,100%,98%)
mistyrose#ffe4e1rgb(255,228,225)rgba(255,228,225,0.8)hsl(7,100%,95%)