Esquemas de color para webs: 40 paletas en diseños de página reales

Un buen esquema de color para una web usa un fondo tranquilo en casi toda la página, un color de texto oscuro con un contraste de al menos 4.5:1 y un único acento de marca reservado para botones y enlaces. Aquí tienes 40 esquemas originales aplicados a páginas en vivo, cada uno con modo oscuro, puntuaciones de contraste y código CSS y Tailwind listo para copiar.

A continuación tienes 40 esquemas de color que creamos para esta página, cada uno aplicado a una pequeña landing page con un hero, un botón y una tarjeta de precios, para que puedas juzgarlo tal como lo vería un visitante y no como una fila de muestras. Cada esquema tiene una versión clara y otra oscura, ratios de contraste medidos y dos formatos listos para copiar: variables CSS simples y un bloque @theme de Tailwind CSS v4, además de una nota sobre cómo convertirlos en tokens de diseño.

Cómo usar esta colección

Cómo elegir un esquema de color para tu web

1. Parte del color de marca, no de una paleta

Si el negocio ya tiene un color de logo, ese es el acento. Construye todo lo demás a su alrededor: un fondo, un color de texto, una superficie más clara para las tarjetas, un color de texto atenuado para las líneas secundarias y un color de texto que vaya sobre el acento. Elegir primero una paleta bonita y luego forzar el logo dentro de ella es la manera en que las webs acaban con dos azules compitiendo.

Si todavía no hay color de marca, elige uno según lo que el negocio necesita que el visitante sienta primero. Los azules y verdes profundos transmiten cuidado y solidez, los rojos y naranjas cálidos transmiten energía y apetito, y los tonos tierra apagados transmiten naturalidad y calma. Son convenciones, no reglas; un fontanero en verde azulado puede destacar precisamente porque toda la competencia usa azul.

2. Usa el reparto 60-30-10 como punto de partida

La regla 60-30-10 viene del interiorismo: aproximadamente el 60 por ciento de una habitación es el color dominante, el 30 por ciento un color secundario y el 10 por ciento un acento. En una web se traduce así:

ProporciónFunción en una página webVariable en estos esquemas
Alrededor del 60%Fondo de página y grandes zonas vacías--bg
Alrededor del 30%Texto, tarjetas, paneles, el footer, bordes--text, --surface, --muted
Alrededor del 10%Botones, enlaces, estados activos, un único destacado por pantalla--accent, --on-accent

La clave es contenerse con el acento. Si todo es del color de acento, nada es una llamada a la acción. Trata los números como una comprobación, no como una medida: si entrecierras los ojos ante tu página y el acento cubre una cuarta parte de la pantalla, se está pasando.

3. Comprueba el contraste antes de enamorarte

Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) fijan los umbrales de contraste que usan la mayoría de las leyes y auditorías de accesibilidad:

QuéMínimo (AA)Mejorado (AAA)Criterio WCAG
Texto de cuerpo4.5:17:11.4.3 y 1.4.6
Texto grande (al menos 18pt, o 14pt en negrita)3:14.5:11.4.3 y 1.4.6
Botones, bordes de campos, iconos con significado3:1 frente a lo que tienen al ladoSin nivel AAA1.4.11

Todos los esquemas de esta página superan 4.5:1 en el texto de cuerpo, en el texto atenuado y en la etiqueta del botón sobre el acento, tanto en la versión clara como en la oscura. La regla para la etiqueta del botón es más estricta de lo que exige WCAG para etiquetas grandes en negrita, pero el texto de los botones suele ser pequeño, así que le aplicamos el listón del texto de cuerpo.

Los ratios se calcularon con la fórmula de luminancia relativa de WCAG, no a ojo. Si cambias un valor hex, vuelve a comprobarlo con el comprobador de contraste de color. Este es el mismo cálculo en JavaScript:

// WCAG 2.x contrast ratio between two hex colors
function luminance(hex) {
  const [r, g, b] = [0, 2, 4].map((i) => {
    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

contrast("#141a2e", "#f7f8fc"); // 16.26, AAA

4. Diseña la versión oscura a propósito

Invertir una paleta clara rara vez funciona. Las versiones oscuras de esta página siguen cuatro hábitos:

5. Pruébalo en un diseño real

Colores que parecen equilibrados como muestras pueden resultar pesados en una página completa, y por eso cada esquema de abajo se muestra en un hero y una tarjeta de precios. Antes de decidirte, pon tu esquema en tu propia página de inicio, míralo en un móvil al aire libre y comprueba que el botón principal es lo primero que encuentra tu vista.

Los 40 esquemas de un vistazo

Las columnas de contraste muestran claro / oscuro. Haz clic en un nombre para ir a su vista previa.

EsquemaGrupoAcentoContraste del textoContraste del botón
Midnight LaunchSaaS y tecnología#3b4fe016.3 / 16.06.2 / 4.6
Signal MintSaaS y tecnología#0e7c6615.4 / 15.75.1 / 11.5
Graphite VoltSaaS y tecnología#c43d1616.2 / 15.95.2 / 6.2
Cloud IrisSaaS y tecnología#6a3fd115.8 / 16.16.5 / 4.7
Dev ConsoleSaaS y tecnología#13795b16.7 / 15.75.4 / 11.2
Ledger NavyFinanzas y derecho#1d4f9115.8 / 15.98.1 / 6.0
Vault GreenFinanzas y derecho#1f6b3e15.0 / 15.76.5 / 9.5
Counsel OxbloodFinanzas y derecho#8a2a2b16.7 / 16.18.6 / 5.3
Steady SlateFinanzas y derecho#3e5f7d15.0 / 15.96.7 / 6.6
Brass AuditFinanzas y derecho#8a641416.1 / 15.75.4 / 9.6
Clinic AquaSalud y bienestar#0b728514.2 / 15.85.6 / 9.8
Calm SageSalud y bienestar#4f7a3a14.7 / 15.85.0 / 8.6
Soft LavenderSalud y bienestar#7445b015.2 / 16.16.5 / 5.1
Dental BrightSalud y bienestar#1769c215.1 / 16.05.5 / 6.3
Studio ClaySalud y bienestar#a4502a15.5 / 15.95.6 / 6.6
Tomato TableComida y hostelería#c0381f16.5 / 16.05.5 / 5.8
Espresso BarComida y hostelería#7a4a2a15.6 / 15.87.4 / 7.0
Citrus MarketComida y hostelería#b45a0015.8 / 15.84.8 / 8.1
Bistro OliveComida y hostelería#5c6b1f15.1 / 15.65.9 / 10.5
Berry BakeryComida y hostelería#b0285a16.2 / 16.16.4 / 5.4
Gallery InkCreatividad y portfolio#e0301e18.1 / 16.04.5 / 5.6
Poster CobaltCreatividad y portfolio#2340d816.6 / 16.17.5 / 4.7
Neon StudioCreatividad y portfolio#c0129a17.1 / 16.05.5 / 5.8
Paper SketchCreatividad y portfolio#b5462a13.9 / 16.05.4 / 6.1
Film TealCreatividad y portfolio#00756e15.0 / 15.75.6 / 11.6
Hardhat OrangeOficios locales y servicios para el hogar#c4520a16.1 / 15.94.6 / 7.3
Pipeline BlueOficios locales y servicios para el hogar#0b5cad15.8 / 15.96.7 / 6.5
Roofline CharcoalOficios locales y servicios para el hogar#b3261e15.6 / 16.06.5 / 5.4
Fresh LawnOficios locales y servicios para el hogar#2f7a1f15.5 / 15.75.3 / 9.9
Spark ElectricOficios locales y servicios para el hogar#a15c0016.7 / 15.85.2 / 8.7
Forest TrailNaturaleza y aire libre#2d6a4f14.8 / 15.86.4 / 8.7
Desert DuskNaturaleza y aire libre#b04a2815.1 / 15.95.5 / 6.3
Glacier LakeNaturaleza y aire libre#14708f15.0 / 15.85.6 / 8.8
Moss and StoneNaturaleza y aire libre#5a6b3a14.7 / 15.95.8 / 8.5
Coastal DuneNaturaleza y aire libre#1f6f8b14.6 / 15.85.7 / 8.3
Noir GoldLujo y moda#86651a17.3 / 15.75.4 / 9.4
Velvet PlumLujo y moda#6d216016.5 / 16.010.3 / 5.8
Ivory EmeraldLujo y moda#0f5f4615.7 / 15.77.7 / 11.2
Rose AtelierLujo y moda#9c3d4a15.9 / 16.16.6 / 5.6
Onyx SapphireLujo y moda#24409a17.2 / 16.09.2 / 4.9
Se muestran los 40

Esquemas de color para SaaS y tecnología

Las webs de producto necesitan un acento claro para la acción principal y neutros tranquilos para pantallas densas. Estos cinco mantienen el fondo cerca del blanco y reservan el color para botones y enlaces.

Midnight Launch

MidnightPrecios · Contacto

Notas de versión que tu equipo sí lee

Texto atenuado en #586eb6.

Empezar

Inicial

$19

Elegir plan
ColorClaroOscuro
Fondo#f7f8fc#10121b
Superficie#ffffff#1a1b29
Texto#141a2e#ededf3
Atenuado#586eb6#81859c
Acento#3b4fe0#5869e5
Sobre el acento#ffffff#ffffff
Contraste
Texto16.26:1 AAA16.02:1 AAA
Atenuado4.58:1 AA5.13:1 AA
Botón6.21:1 AA4.60:1 AA

Variables CSS 

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

SignalPrecios · Contacto

Alertas de disponibilidad que despiertan a la persona correcta

Texto atenuado en #357e70.

Empezar

Equipo

$29

Elegir plan
ColorClaroOscuro
Fondo#f4faf8#101b19
Superficie#ffffff#1a2926
Texto#0f2420#edf3f2
Atenuado#357e70#7e9a95
Acento#0e7c66#55e7ca
Sobre el acento#ffffff#101b19
Contraste
Texto15.37:1 AAA15.68:1 AAA
Atenuado4.55:1 AA5.82:1 AA
Botón5.13:1 AA11.46:1 AAA

Variables CSS 

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

GraphitePrecios · Contacto

Facturas enviadas antes de que se enfríe el café

Texto atenuado en #6e6e81.

Empezar

Solo

$12

Elegir plan
ColorClaroOscuro
Fondo#f5f5f2#1b1310
Superficie#ffffff#291d1a
Texto#18181a#f3eeed
Atenuado#6e6e81#9a857e
Acento#c43d16#e77655
Sobre el acento#ffffff#1b1310
Contraste
Texto16.23:1 AAA15.92:1 AAA
Atenuado4.57:1 AA5.26:1 AA
Botón5.22:1 AA6.21:1 AA

Variables CSS 

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

CloudPrecios · Contacto

Una sola bandeja de entrada para cada pregunta de tus clientes

Texto atenuado en #7367b2.

Empezar

Crecimiento

$49

Elegir plan
ColorClaroOscuro
Fondo#f8f7fd#13101b
Superficie#ffffff#1e1a29
Texto#1e1a33#eeedf3
Atenuado#7367b2#89819c
Acento#6a3fd1#8c6bdc
Sobre el acento#ffffff#13101b
Contraste
Texto15.76:1 AAA16.14:1 AAA
Atenuado4.57:1 AA5.09:1 AA
Botón6.47:1 AA4.70:1 AA

Variables CSS 

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

DevPrecios · Contacto

Previsualizaciones de despliegue para cada pull request

Texto atenuado en #537768.

Empezar

Pro

$24

Elegir plan
ColorClaroOscuro
Fondo#f3f6f4#101b18
Superficie#ffffff#1a2924
Texto#101714#edf3f1
Atenuado#537768#7e9a92
Acento#13795b#58e5bb
Sobre el acento#ffffff#101b18
Contraste
Texto16.71:1 AAA15.68:1 AAA
Atenuado4.59:1 AA5.81:1 AA
Botón5.37:1 AA11.19:1 AAA

Variables CSS 

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para finanzas y derecho

A los bancos, asesorías y despachos de abogados se les juzga por la confianza, así que estos usan acentos profundos y poco saturados y muy poca decoración. Aun así, el acento tiene que funcionar como botón, y por eso cada uno supera 4.5:1 con su etiqueta.

Ledger Navy

LedgerPrecios · Contacto

Contabilidad para empresas de cinco a cincuenta personas

Texto atenuado en #3a70c5.

Empezar

Cierre mensual

$240

Elegir plan
ColorClaroOscuro
Fondo#f6f7f9#10151b
Superficie#ffffff#1a2029
Texto#0f1d33#edeff3
Atenuado#3a70c5#7e8a9a
Acento#1d4f91#5e95df
Sobre el acento#ffffff#10151b
Contraste
Texto15.75:1 AAA15.93:1 AAA
Atenuado4.55:1 AA5.23:1 AA
Botón8.14:1 AAA5.97:1 AA

Variables CSS 

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

VaultPrecios · Contacto

Objetivos de ahorro que avanzan solos

Texto atenuado en #417b59.

Empezar

Plus

$6

Elegir plan
ColorClaroOscuro
Fondo#f5f7f3#101b15
Superficie#ffffff#1a2920
Texto#13241a#edf3ef
Atenuado#417b59#7e9a8a
Acento#1f6b3e#69d394
Sobre el acento#ffffff#101b15
Contraste
Texto15.04:1 AAA15.69:1 AAA
Atenuado4.64:1 AA5.78:1 AA
Botón6.50:1 AA9.54:1 AAA

Variables CSS 

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

CounselPrecios · Contacto

Asesoramiento en derecho laboral, explicado con claridad

Texto atenuado en #a65c45.

Empezar

Primera consulta

$150

Elegir plan
ColorClaroOscuro
Fondo#faf7f5#1b1010
Superficie#ffffff#291a1a
Texto#24140f#f3eded
Atenuado#a65c45#9a7e7f
Acento#8a2a2b#d26a6b
Sobre el acento#ffffff#1b1010
Contraste
Texto16.66:1 AAA16.09:1 AAA
Atenuado4.65:1 AA5.02:1 AA
Botón8.58:1 AAA5.33:1 AA

Variables CSS 

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

SteadyPrecios · Contacto

Nóminas que se pagan el mismo día cada mes

Texto atenuado en #59718d.

Empezar

Core

$39

Elegir plan
ColorClaroOscuro
Fondo#f4f6f8#12161a
Superficie#ffffff#1c2127
Texto#1a2129#edf0f3
Atenuado#59718d#7e8d9a
Acento#3e5f7d#7da0bf
Sobre el acento#ffffff#12161a
Contraste
Texto14.99:1 AAA15.89:1 AAA
Atenuado4.65:1 AA5.33:1 AA
Botón6.69:1 AA6.62:1 AA

Variables CSS 

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

BrassPrecios · Contacto

Declaraciones de impuestos preparadas y presentadas antes de abril

Texto atenuado en #847048.

Empezar

Personal

$180

Elegir plan
ColorClaroOscuro
Fondo#fbf9f4#1b1810
Superficie#ffffff#29241a
Texto#211c12#f3f1ed
Atenuado#847048#9a917e
Acento#8a6414#e6b856
Sobre el acento#ffffff#1b1810
Contraste
Texto16.10:1 AAA15.71:1 AAA
Atenuado4.54:1 AA5.68:1 AA
Botón5.37:1 AA9.58:1 AAA

Variables CSS 

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para salud y bienestar

Clínicas, terapeutas y estudios quieren transmitir limpieza y tranquilidad. Dominan los azules y verdes fríos, con una opción cálida en tono arcilla para spas y centros de fisioterapia que quieren parecer menos clínicos.

Clinic Aqua

ClinicPrecios · Contacto

Citas con tu médico de familia en la misma semana

Texto atenuado en #267c8b.

Empezar

Sin cita

$0

Elegir plan
ColorClaroOscuro
Fondo#f3f9fa#10191b
Superficie#ffffff#1a2629
Texto#0d2a2f#edf2f3
Atenuado#267c8b#7e969a
Acento#0b7285#55d0e7
Sobre el acento#ffffff#10191b
Contraste
Texto14.21:1 AAA15.80:1 AAA
Atenuado4.55:1 AA5.71:1 AA
Botón5.59:1 AA9.82:1 AAA

Variables CSS 

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

CalmPrecios · Contacto

Clases guiadas de respiración, por la mañana y por la tarde

Texto atenuado en #5a7a4d.

Empezar

Clase suelta

$15

Elegir plan
ColorClaroOscuro
Fondo#f6f8f3#141a11
Superficie#ffffff#1f271b
Texto#1c2618#eff3ed
Atenuado#5a7a4d#889a7e
Acento#4f7a3a#92c17c
Sobre el acento#ffffff#141a11
Contraste
Texto14.66:1 AAA15.78:1 AAA
Atenuado4.54:1 AA5.88:1 AA
Botón5.03:1 AA8.55:1 AAA

Variables CSS 

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

SoftPrecios · Contacto

Sesiones de terapia desde una habitación tranquila en casa

Texto atenuado en #7d65a8.

Empezar

Sesión individual

$90

Elegir plan
ColorClaroOscuro
Fondo#f9f7fc#15101b
Superficie#ffffff#201a28
Texto#251d33#efedf3
Atenuado#7d65a8#8d819c
Acento#7445b0#9974c8
Sobre el acento#ffffff#15101b
Contraste
Texto15.16:1 AAA16.11:1 AAA
Atenuado4.59:1 AA5.13:1 AA
Botón6.52:1 AA5.07:1 AA

Variables CSS 

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

DentalPrecios · Contacto

Limpiezas, revisiones y horario de tarde

Texto atenuado en #3373bd.

Empezar

Primera revisión

$79

Elegir plan
ColorClaroOscuro
Fondo#f4f8fd#10151b
Superficie#ffffff#1a2129
Texto#0f2238#edf0f3
Atenuado#3373bd#7e8c9a
Acento#1769c2#559be7
Sobre el acento#ffffff#10151b
Contraste
Texto15.08:1 AAA16.03:1 AAA
Atenuado4.55:1 AA5.33:1 AA
Botón5.47:1 AA6.31:1 AA

Variables CSS 

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

StudioPrecios · Contacto

Masaje y fisioterapia bajo el mismo techo

Texto atenuado en #9e6042.

Empezar

60 minutos

$95

Elegir plan
ColorClaroOscuro
Fondo#fbf6f2#1b1410
Superficie#ffffff#291e1a
Texto#2b1a12#f3efed
Atenuado#9e6042#9a877e
Acento#a4502a#d78865
Sobre el acento#ffffff#1b1410
Contraste
Texto15.54:1 AAA15.93:1 AAA
Atenuado4.65:1 AA5.32:1 AA
Botón5.59:1 AA6.58:1 AA

Variables CSS 

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para comida y hostelería

Los restaurantes y tiendas de alimentación pueden permitirse acentos más cálidos y llamativos, porque el apetito responde a la calidez. Los fondos son ligeramente crema para que las fotos de comida no se vean frías sobre blanco puro.

Tomato Table

TomatoPrecios · Contacto

Pizza al horno de leña y una mesa larga para amigos

Texto atenuado en #b35944.

Empezar

Banquete familiar

$58

Elegir plan
ColorClaroOscuro
Fondo#fff8f3#1b1210
Superficie#ffffff#291c1a
Texto#2a1510#f3eeed
Atenuado#b35944#9a837e
Acento#c0381f#e46e58
Sobre el acento#ffffff#1b1210
Contraste
Texto16.46:1 AAA16.01:1 AAA
Atenuado4.51:1 AA5.19:1 AA
Botón5.49:1 AA5.85:1 AA

Variables CSS 

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

EspressoPrecios · Contacto

Granos de origen único tostados cada martes

Texto atenuado en #916548.

Empezar

Bolsa de 340 g

$18

Elegir plan
ColorClaroOscuro
Fondo#f8f3ee#1b1510
Superficie#fffdfa#29201a
Texto#241912#f3efed
Atenuado#916548#9a897e
Acento#7a4a2a#cd956f
Sobre el acento#ffffff#1b1510
Contraste
Texto15.58:1 AAA15.83:1 AAA
Atenuado4.58:1 AA5.38:1 AA
Botón7.39:1 AAA7.00:1 AAA

Variables CSS 

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

CitrusPrecios · Contacto

Cajas de fruta a domicilio los viernes por la mañana

Texto atenuado en #82732f.

Empezar

Caja pequeña

$32

Elegir plan
ColorClaroOscuro
Fondo#fffbef#1b1610
Superficie#ffffff#29211a
Texto#24200d#f3f0ed
Atenuado#82732f#9a8c7e
Acento#b45a00#e79e55
Sobre el acento#ffffff#1b1610
Contraste
Texto15.77:1 AAA15.83:1 AAA
Atenuado4.57:1 AA5.50:1 AA
Botón4.77:1 AA8.06:1 AAA

Variables CSS 

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

BistroPrecios · Contacto

Una carta corta que cambia con la temporada

Texto atenuado en #6c743f.

Empezar

Menú degustación

$65

Elegir plan
ColorClaroOscuro
Fondo#f7f6ee#191b10
Superficie#ffffff#26291a
Texto#1f2112#f2f3ed
Atenuado#6c743f#959a7e
Acento#5c6b1f#bed369
Sobre el acento#ffffff#191b10
Contraste
Texto15.08:1 AAA15.61:1 AAA
Atenuado4.60:1 AA5.97:1 AA
Botón5.87:1 AA10.54:1 AAA

Variables CSS 

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

BerryPrecios · Contacto

Tartas por capas con dos días de antelación

Texto atenuado en #b74e6a.

Empezar

Tarta de seis pulgadas

$42

Elegir plan
ColorClaroOscuro
Fondo#fdf5f7#1b1014
Superficie#ffffff#291a1f
Texto#2c1219#f3edef
Atenuado#b74e6a#9a7e89
Acento#b0285a#db618e
Sobre el acento#ffffff#1b1014
Contraste
Texto16.21:1 AAA16.07:1 AAA
Atenuado4.54:1 AA5.06:1 AA
Botón6.37:1 AA5.41:1 AA

Variables CSS 

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para creatividad y portfolio

Los portfolios y estudios pueden arriesgar más. Estos combinan texto casi negro con un único acento fuerte, como haría un póster impreso, y dejan que el propio trabajo aporte el resto del color.

Poster Cobalt

PosterPrecios · Contacto

Serigrafías en tiradas de cincuenta

Texto atenuado en #7d6a6a.

Empezar

Lámina A2

$70

Elegir plan
ColorClaroOscuro
Fondo#f6f4ef#10121b
Superficie#ffffff#1a1c29
Texto#151515#edeef3
Atenuado#7d6a6a#7e839a
Acento#2340d8#6077e6
Sobre el acento#ffffff#10121b
Contraste
Texto16.61:1 AAA16.12:1 AAA
Atenuado4.61:1 AA4.98:1 AA
Botón7.51:1 AAA4.69:1 AA

Variables CSS 

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

NeonPrecios · Contacto

Motion graphics para lanzamientos musicales

Texto atenuado en #785ec7.

Empezar

Videoclip con letra

$900

Elegir plan
ColorClaroOscuro
Fondo#f7f5ff#1b1019
Superficie#ffffff#291a25
Texto#160f2b#f3edf1
Atenuado#785ec7#9a7e94
Acento#c0129a#e755c7
Sobre el acento#ffffff#1b1019
Contraste
Texto17.11:1 AAA16.03:1 AAA
Atenuado4.61:1 AA5.10:1 AA
Botón5.53:1 AA5.75:1 AA

Variables CSS 

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

PaperPrecios · Contacto

Mapas ilustrados de pueblos y senderos

Texto atenuado en #7b6f5e.

Empezar

Mapa a medida

$650

Elegir plan
ColorClaroOscuro
Fondo#f9f6ef#1b1210
Superficie#fffdf8#291d1a
Texto#2a2620#f3eeed
Atenuado#7b6f5e#9a847e
Acento#b5462a#da7a62
Sobre el acento#ffffff#1b1210
Contraste
Texto13.93:1 AAA16.01:1 AAA
Atenuado4.55:1 AA5.24:1 AA
Botón5.42:1 AA6.09:1 AA

Variables CSS 

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

FilmPrecios · Contacto

Documentales cortos para organizaciones sin ánimo de lucro

Texto atenuado en #45767d.

Empezar

Película de tres minutos

$3,200

Elegir plan
ColorClaroOscuro
Fondo#f2f6f6#101b1a
Superficie#ffffff#1a2928
Texto#142224#edf3f2
Atenuado#45767d#7e9a98
Acento#00756e#55e7de
Sobre el acento#ffffff#101b1a
Contraste
Texto15.02:1 AAA15.67:1 AAA
Atenuado4.66:1 AA5.83:1 AA
Botón5.57:1 AA11.62:1 AAA

Variables CSS 

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para oficios locales y servicios para el hogar

Fontaneros, techadores, electricistas y jardineros necesitan un botón de llamada que destaque en la pantalla del móvil a plena luz del día. Cada acento de aquí es un color muy visible con una etiqueta que sigue siendo legible.

Hardhat Orange

HardhatPrecios · Contacto

Reformas de cocinas y baños, de principio a fin

Texto atenuado en #736f62.

Empezar

Visita a la obra

Gratis

Elegir plan
ColorClaroOscuro
Fondo#f8f6f2#1b1410
Superficie#ffffff#291f1a
Texto#1b1a17#f3efed
Atenuado#736f62#9a897e
Acento#c4520a#e78e55
Sobre el acento#ffffff#1b1410
Contraste
Texto16.12:1 AAA15.93:1 AAA
Atenuado4.66:1 AA5.42:1 AA
Botón4.61:1 AA7.28:1 AAA

Variables CSS 

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

PipelinePrecios · Contacto

¿Una tubería reventada? Un fontanero en tu puerta esta noche

Texto atenuado en #3c71b1.

Empezar

Salida urgente

$89

Elegir plan
ColorClaroOscuro
Fondo#f3f6fa#10161b
Superficie#ffffff#1a2129
Texto#0f1c2c#edf0f3
Atenuado#3c71b1#7e8c9a
Acento#0b5cad#559ee7
Sobre el acento#ffffff#10161b
Contraste
Texto15.84:1 AAA15.93:1 AAA
Atenuado4.62:1 AA5.30:1 AA
Botón6.67:1 AA6.45:1 AA

Variables CSS 

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

RooflinePrecios · Contacto

Reparación de tejados con fotos de cada teja

Texto atenuado en #7f6c6c.

Empezar

Inspección

$120

Elegir plan
ColorClaroOscuro
Fondo#f5f5f5#1b1110
Superficie#ffffff#291a1a
Texto#1c1c1c#f3eded
Atenuado#7f6c6c#9a807e
Acento#b3261e#e36059
Sobre el acento#ffffff#1b1110
Contraste
Texto15.63:1 AAA16.00:1 AAA
Atenuado4.52:1 AA5.08:1 AA
Botón6.54:1 AA5.36:1 AA

Variables CSS 

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

FreshPrecios · Contacto

Siega semanal y limpiezas de primavera

Texto atenuado en #4f7c47.

Empezar

Visita semanal

$45

Elegir plan
ColorClaroOscuro
Fondo#f4f8f1#121b10
Superficie#ffffff#1c291a
Texto#152113#eef3ed
Atenuado#4f7c47#839a7e
Acento#2f7a1f#79d864
Sobre el acento#ffffff#121b10
Contraste
Texto15.53:1 AAA15.70:1 AAA
Atenuado4.54:1 AA5.79:1 AA
Botón5.35:1 AA9.93:1 AAA

Variables CSS 

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

SparkPrecios · Contacto

Mejoras de cuadro eléctrico e instalación de cargadores para vehículos eléctricos

Texto atenuado en #737359.

Empezar

Instalación de cargador

$650

Elegir plan
ColorClaroOscuro
Fondo#fbfaf2#1b1610
Superficie#ffffff#29221a
Texto#1a1a14#f3f0ed
Atenuado#737359#9a8e7e
Acento#a15c00#e7a855
Sobre el acento#ffffff#1b1610
Contraste
Texto16.69:1 AAA15.83:1 AAA
Atenuado4.64:1 AA5.60:1 AA
Botón5.19:1 AA8.67:1 AAA

Variables CSS 

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para naturaleza y aire libre

Marcas de outdoor, granjas, operadores turísticos y productos ecológicos. Acentos terrosos sobre blanco roto, con modos oscuros que recuerdan al atardecer y no a un editor de código.

Forest Trail

ForestPrecios · Contacto

Rutas guiadas para grupos pequeños

Texto atenuado en #4a7958.

Empezar

Media jornada

$55

Elegir plan
ColorClaroOscuro
Fondo#f3f6f2#111a16
Superficie#ffffff#1a2822
Texto#16241a#edf3f0
Atenuado#4a7958#7e9a8e
Acento#2d6a4f#77c5a3
Sobre el acento#ffffff#111a16
Contraste
Texto14.81:1 AAA15.79:1 AAA
Atenuado4.63:1 AA5.83:1 AA
Botón6.39:1 AA8.71:1 AAA

Variables CSS 

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

DesertPrecios · Contacto

Excursiones al cañón al amanecer y al atardecer

Texto atenuado en #976646.

Empezar

Excursión al atardecer

$75

Elegir plan
ColorClaroOscuro
Fondo#fbf5ee#1b1310
Superficie#ffffff#291d1a
Texto#2b1d14#f3eeed
Atenuado#976646#9a857e
Acento#b04a28#db8061
Sobre el acento#ffffff#1b1310
Contraste
Texto15.05:1 AAA15.92:1 AAA
Atenuado4.51:1 AA5.26:1 AA
Botón5.45:1 AA6.34:1 AA

Variables CSS 

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

GlacierPrecios · Contacto

Alquiler de kayaks por horas

Texto atenuado en #37749a.

Empezar

Dos horas

$40

Elegir plan
ColorClaroOscuro
Fondo#f1f6f9#10181b
Superficie#ffffff#1a2529
Texto#10222d#edf1f3
Atenuado#37749a#7e939a
Acento#14708f#55c2e7
Sobre el acento#ffffff#10181b
Contraste
Texto14.97:1 AAA15.81:1 AAA
Atenuado4.67:1 AA5.59:1 AA
Botón5.61:1 AA8.78:1 AAA

Variables CSS 

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

MossPrecios · Contacto

Jardines de plantas autóctonas que necesitan poca agua

Texto atenuado en #68725a.

Empezar

Plan de jardín

$300

Elegir plan
ColorClaroOscuro
Fondo#f4f5f0#171912
Superficie#ffffff#23261c
Texto#1f221b#f1f3ed
Atenuado#68725a#909a7e
Acento#5a6b3a#a7bb81
Sobre el acento#ffffff#171912
Contraste
Texto14.71:1 AAA15.86:1 AAA
Atenuado4.63:1 AA6.00:1 AA
Botón5.84:1 AA8.50:1 AAA

Variables CSS 

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

CoastalPrecios · Contacto

Casitas de playa a un paseo corto del agua

Texto atenuado en #5c727c.

Empezar

Por noche

$210

Elegir plan
ColorClaroOscuro
Fondo#f9f6ef#10181b
Superficie#ffffff#1a2529
Texto#1d2427#edf1f3
Atenuado#5c727c#7e939a
Acento#1f6f8b#61bcdc
Sobre el acento#ffffff#10181b
Contraste
Texto14.59:1 AAA15.81:1 AAA
Atenuado4.68:1 AA5.59:1 AA
Botón5.67:1 AA8.33:1 AAA

Variables CSS 

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de color para lujo y moda

Joyerías, hoteles boutique y marcas de moda suelen buscar contención: un fondo sobrio, texto oscuro y un único acento intenso usado con moderación.

Noir Gold

NoirPrecios · Contacto

Anillos engastados a mano por encargo

Texto atenuado en #7a6e62.

Empezar

Consulta

Gratis

Elegir plan
ColorClaroOscuro
Fondo#f8f6f1#1b1810
Superficie#ffffff#29241a
Texto#141210#f3f1ed
Atenuado#7a6e62#9a927e
Acento#86651a#e0b85d
Sobre el acento#ffffff#1b1810
Contraste
Texto17.30:1 AAA15.71:1 AAA
Atenuado4.59:1 AA5.73:1 AA
Botón5.40:1 AA9.44:1 AAA

Variables CSS 

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

VelvetPrecios · Contacto

Ropa de noche de alquiler para el fin de semana

Texto atenuado en #a5538e.

Empezar

Alquiler de fin de semana

$120

Elegir plan
ColorClaroOscuro
Fondo#f9f5f8#1b1019
Superficie#ffffff#291a26
Texto#24121f#f3edf2
Atenuado#a5538e#9a7e95
Acento#6d2160#d26ac0
Sobre el acento#ffffff#1b1019
Contraste
Texto16.46:1 AAA16.04:1 AAA
Atenuado4.60:1 AA5.10:1 AA
Botón10.31:1 AAA5.78:1 AA

Variables CSS 

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

IvoryPrecios · Contacto

Un hotel de doce habitaciones sobre el antiguo puerto

Texto atenuado en #3e7c65.

Empezar

Habitación jardín

$340

Elegir plan
ColorClaroOscuro
Fondo#f8f7f2#101b18
Superficie#ffffff#1a2924
Texto#10201a#edf3f1
Atenuado#3e7c65#7e9a91
Acento#0f5f46#58e5b9
Sobre el acento#ffffff#101b18
Contraste
Texto15.74:1 AAA15.68:1 AAA
Atenuado4.58:1 AA5.80:1 AA
Botón7.65:1 AAA11.18:1 AAA

Variables CSS 

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

RosePrecios · Contacto

Arreglos de novia con dos pruebas incluidas

Texto atenuado en #a65b57.

Empezar

Paquete de pruebas

$280

Elegir plan
ColorClaroOscuro
Fondo#fcf6f5#1b1012
Superficie#ffffff#281a1c
Texto#2a1716#f3eded
Atenuado#a65b57#9a7e82
Acento#9c3d4a#c9747f
Sobre el acento#ffffff#1b1012
Contraste
Texto15.93:1 AAA16.07:1 AAA
Atenuado4.62:1 AA5.03:1 AA
Botón6.60:1 AA5.57:1 AA

Variables CSS 

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

OnyxPrecios · Contacto

Relojes revisados por un relojero certificado

Texto atenuado en #586db6.

Empezar

Servicio completo

$450

Elegir plan
ColorClaroOscuro
Fondo#f5f6f8#10131b
Superficie#ffffff#1a1d29
Texto#0e1220#edeef3
Atenuado#586db6#7e859a
Acento#24409a#627eda
Sobre el acento#ffffff#10131b
Contraste
Texto17.25:1 AAA16.03:1 AAA
Atenuado4.54:1 AA5.05:1 AA
Botón9.23:1 AAA4.88:1 AA

Variables CSS 

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cómo usar los bloques de código

Variables CSS simples

El bloque CSS define seis variables en :root y las redefine dentro de @media (prefers-color-scheme: dark), así que la página sigue el ajuste del sistema del visitante sin JavaScript. Úsalas en cualquier sitio:

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }

Si además quieres un interruptor manual, copia los valores oscuros en una segunda regla como :root[data-theme="dark"] { ... } y aplica ese atributo desde tu interruptor.

Tailwind CSS v4

En Tailwind v4, los valores del tema viven en CSS dentro de un bloque @theme , y cualquier variable llamada --color-* se convierte en una utilidad de color, así que --color-accent te da bg-accent, text-accent y border-accent. El bloque de Tailwind de cada esquema asigna esos nombres a las variables CSS de arriba con @theme inline, la opción que Tailwind documenta para valores de tema que hacen referencia a otras variables. Pega primero las variables CSS y después el bloque @theme , tras @import "tailwindcss";. El modo oscuro sigue funcionando porque las utilidades apuntan a las mismas variables que cambia la media query:

<section class="bg-bg text-text">
  <div class="bg-surface rounded-xl p-6">
    <p class="text-muted">Starter plan</p>
    <a class="bg-accent text-on-accent rounded-lg px-4 py-2">Get started</a>
  </div>
</section>

¿Usas Tailwind v3? En ese caso, pon los mismos valores hex claros en theme.extend.colors dentro de tailwind.config.js . Si prefieres generar una escala completa de tonos de 50 a 950 a partir de un acento, el generador de paletas de colores de Tailwind lo hace por ti.

Tokens de diseño

Para llevar un esquema a una herramienta de tokens de diseño, asigna los seis roles a tokens en el formato JSON del Design Tokens Community Group, con un $type igual a color y el hex como $value, en un grupo light y otro dark :

{
  "color": {
    "light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
    "dark":  { "accent": { "$type": "color", "$value": "#5869e5" } }
  }
}

Las herramientas que leen este formato, como Style Dictionary, pueden convertirlo en valores para CSS, iOS o Android.

Errores comunes con los esquemas de color

Herramientas para crear el tuyo

Para probar tu esquema en distintos diseños, explora las secciones hero y componentes de precios, y combina los colores con la tipografía de las mejores fuentes para webs.

Preguntas frecuentes

¿Qué es un buen esquema de color para una web?

Uno con un fondo tranquilo que cubre la mayor parte de la página, un color de texto oscuro que alcanza un contraste de al menos 4.5:1 con él y un color de acento reservado para botones y enlaces. El acento debe encajar con la marca, y la etiqueta del botón sobre él también debe superar 4.5:1.

¿Cuántos colores debería tener una web?

A la mayoría de las webs les bastan cinco o seis roles: fondo, superficie para tarjetas, texto principal, texto atenuado, un acento y el color del texto que va sobre el acento. Añade rojo, ámbar y verde solo para mensajes de error, aviso y éxito.

¿Qué es la regla 60-30-10 en diseño web?

Es una guía de proporciones tomada del interiorismo: aproximadamente un 60 por ciento de color dominante (el fondo de la página), un 30 por ciento de color secundario (texto, tarjetas y paneles) y un 10 por ciento de acento (botones, enlaces y destacados). Así el acento es lo bastante escaso como para llamar la atención.

¿Qué ratio de contraste exige WCAG para el texto?

El nivel AA de WCAG 2.2 exige al menos 4.5:1 para el texto normal y 3:1 para el texto grande, es decir, de al menos 18 puntos o 14 puntos en negrita. El nivel AAA los eleva a 7:1 y 4.5:1. Los botones, los bordes de los campos y los iconos con significado necesitan 3:1 frente a lo que los rodea.

¿Puedo usar estos esquemas de color en una web comercial?

Sí. Creamos estas paletas para esta página y puedes usarlas en cualquier proyecto personal o comercial sin necesidad de dar crédito.

¿Cómo hago la versión en modo oscuro de un esquema de color?

No te limites a invertirlo. Usa un fondo muy oscuro tintado con el matiz de la marca, un color de texto blanco roto y una versión más clara del acento para que siga siendo visible. Después vuelve a comprobar el contraste del texto y de la etiqueta del botón, que puede tener que pasar de blanco a oscuro.

Vistas previas

Vistas previas claras u oscuras

Claro

Oscuro

Filtrar por estilo

Todos

SaaS

Finanzas

Salud

Comida

Creatividad

Oficios

Naturaleza

Lujo

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

Producto

Para quién es

Funciones

Recursos

Empresa

Mapa del sitio