Introduce un color de marca, obtén primario / secundario / éxito / advertencia / peligro — exportado como configuración Tailwind y variables CSS.
2F6FED · L 57%
Primario
Derivados automáticamente, se mantienen la luminosidad y croma de la marca
Secundario
Derivados automáticamente, se mantienen la luminosidad y croma de la marca
Éxito
Derivados automáticamente, se mantienen la luminosidad y croma de la marca
Advertencia
Derivados automáticamente, se mantienen la luminosidad y croma de la marca
Peligro
Derivados automáticamente, se mantienen la luminosidad y croma de la marca
Exportar código
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#000101",
foreground: "#ffffff",
},
secondary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010101",
foreground: "#ffffff",
},
success: {
DEFAULT: "#000101",
light: "#010101",
dark: "#000100",
foreground: "#ffffff",
},
warning: {
DEFAULT: "#010100",
light: "#010101",
dark: "#010100",
foreground: "#ffffff",
},
danger: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010000",
foreground: "#ffffff",
},
},
},
},
};Ingresa un color de marca, obtén los cinco conjuntos semánticos que toda interfaz necesita, exportados como código.
Pega tu HEX de marca; los colores semánticos heredan su luminosidad y carácter de croma.
El éxito se sitúa en el rango de matiz verde, la advertencia en ámbar, el peligro en rojo: el matiz es semántico, el carácter se mantiene en la marca.
Copia como configuración de Tailwind, variables CSS o JSON directamente en tu sistema de diseño.
Tres preguntas frecuentes al integrar una paleta en un sistema de diseño.
Abre el editor de tableros y utilízalo como una interfaz real.
Ajusta L / C / H en el espacio OKLCH perceptualmente uniforme con vista previa en vivo y salida oklch() / HEX / RGB.
Convierte cualquier color en una escala de sistema de diseño de 11 pasos, perceptualmente uniforme en OKLCH, con contraste WCAG por paso, exporta a Tailwind/CSS/SCSS/JSON.
Validación de contraste WCAG 2.1 entre cualquier color de primer plano y fondo.
Describe una escena o estado de ánimo en una línea — obtén una paleta de cinco roles con justificación.