Color en CSS

Hex, rgb, hsl y las formas relativas modernas, más la transparencia.

.panel {
  color: #e8e8ea;
  background: hsl(230 15% 8%);
  border: 1px solid rgb(255 255 255 / 8%);
}

.panel .muted {
  color: color-mix(in srgb, #e8e8ea 60%, transparent);
}

.accent {
  color: hsl(255 100% 68%);
}

Cómo funciona

1. hsl hace fácil razonar una paleta: gira el matiz.
2. El cuarto valor es el alfa, de 0 a 1 o como porcentaje.
3. color-mix mezcla dos colores sin preprocesador.

Palabras clave y builtins usados aquí

• background
• border
• color
• hsl
• px
• rgb

El intento, en números

Líneas

13

Caracteres a escribir

207

Tokens

69

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 55 segundos.

Escribe este fragmento

Paso 1 de 4 en Color y tipografía; paso 10 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →