typestar

Color en una gama más amplia en CSS

oklch es luminosidad, croma y matiz: una paleta es un número cambiando a la vez.

:root {
  --brand: oklch(62% 0.19 256);
  --brand-tint: color-mix(in oklab, var(--brand) 20%, white);
  --brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
  --ink: oklch(22% 0.02 260);
}

.button {
  background: var(--brand);
  color: white;
}

.button:hover {
  background: var(--brand-dark);
}

.note {
  background: var(--brand-tint);
  color: var(--ink);
}

Cómo funciona

  1. Las tres partes son perceptuales: igual luminosidad de verdad se ve igual.
  2. color-mix() mezcla dos colores en el espacio que tú nombres.
  3. La sintaxis de color relativo deriva un color de otro.

Palabras clave y builtins usados aquí

El intento, en números

Líneas
20
Caracteres a escribir
350
Tokens
106
Ritmo de tres estrellas
75 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →