Registrarse Registrarse
Tetsuo

Tetsuo

Paleta de 12 colores · Colores cálidos · Tonos oscuros · Armonía complementaria

Volver a la biblioteca

Tetsuo

Paleta de 12 colores · Colores cálidos · Tonos oscuros · Armonía complementaria

Editar
Colores apagados 12 colores Colores cálidos Tonos oscuros Armonía complementaria manga anime mierdinsky comic
Me gusta 19
Colores 12

Variables CSS

:root {
  --c-muted-1: #330033;
  --c-muted-2: #303030;
  --c-muted-3: #754402;
  --c-muted-4: #2A5B5B;
  --c-muted-5: #009999;
  --c-muted-6: #AA0000;
  --c-muted-7: #8F5F30;
  --c-muted-8: #696969;
  --c-muted-9: #BA5D2F;
  --c-muted-10: #996666;
  --c-muted-11: #CC9966;
  --c-muted-12: #FFCC66;
}

Sobre esta paleta

Esta paleta de 12 colores apagados va de Qing Yellow (#FFCC66), su tono más claro, a Exquisite Eggplant (#330033), el más oscuro. Combina Exquisite Eggplant, Off Black, Dusky Brown, Bayberry, Regula Barbara Blue, Heartbeat, Rusty Coin, Dim Grey, Gold Varnish Brown, Copper Rose, Oak Buff y Qing Yellow en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 8 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #330033 sobre #FFCC66, con 11,85:1.

Una paleta versátil para páginas de marketing, bloques hero de producto, ilustraciones y estados de acento de la interfaz.

Desglose de colores

Exquisite Eggplant #330033
RGB
rgb(51, 0, 51)
HSL
hsl(300, 100%, 10%)
Luminancia
0,009
Off Black #303030
RGB
rgb(48, 48, 48)
HSL
hsl(0, 0%, 19%)
Luminancia
0,030
Dusky Brown #754402
RGB
rgb(117, 68, 2)
HSL
hsl(34, 97%, 23%)
Luminancia
0,079
Bayberry #2A5B5B
RGB
rgb(42, 91, 91)
HSL
hsl(180, 37%, 26%)
Luminancia
0,087
Regula Barbara Blue #009999
RGB
rgb(0, 153, 153)
HSL
hsl(180, 100%, 30%)
Luminancia
0,251
Heartbeat #AA0000
RGB
rgb(170, 0, 0)
HSL
hsl(0, 100%, 33%)
Luminancia
0,086
Rusty Coin #8F5F30
RGB
rgb(143, 95, 48)
HSL
hsl(30, 50%, 37%)
Luminancia
0,142
Dim Grey #696969
RGB
rgb(105, 105, 105)
HSL
hsl(0, 0%, 41%)
Luminancia
0,141
Gold Varnish Brown #BA5D2F
RGB
rgb(186, 93, 47)
HSL
hsl(20, 60%, 46%)
Luminancia
0,185
Copper Rose #996666
RGB
rgb(153, 102, 102)
HSL
hsl(0, 20%, 50%)
Luminancia
0,172
Oak Buff #CC9966
RGB
rgb(204, 153, 102)
HSL
hsl(30, 50%, 60%)
Luminancia
0,366
Qing Yellow #FFCC66
RGB
rgb(255, 204, 102)
HSL
hsl(40, 100%, 70%)
Luminancia
0,654

Contraste y accesibilidad

Combinaciones de colores en la paleta: 66. De ellas, 8 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal.

Aa #330033 sobre #FFCC66 11,85:1 AAA
Aa #303030 sobre #FFCC66 8,85:1 AAA
Aa #330033 sobre #CC9966 7,00:1 AAA
Aa #754402 sobre #FFCC66 5,45:1 AA
Aa #303030 sobre #CC9966 5,23:1 AA
Aa #AA0000 sobre #FFCC66 5,20:1 AA
Aa #2A5B5B sobre #FFCC66 5,13:1 AA
Aa #330033 sobre #009999 5,06:1 AA
Aa #330033 sobre #BA5D2F 3,95:1 AA, texto grande
Aa #303030 sobre #009999 3,78:1 AA, texto grande
Aa #330033 sobre #996666 3,74:1 AA, texto grande
Aa #696969 sobre #FFCC66 3,68:1 AA, texto grande
Aa #8F5F30 sobre #FFCC66 3,66:1 AA, texto grande
Aa #330033 sobre #8F5F30 3,24:1 AA, texto grande
Aa #330033 sobre #696969 3,22:1 AA, texto grande
Aa #754402 sobre #CC9966 3,22:1 AA, texto grande
Aa #996666 sobre #FFCC66 3,17:1 AA, texto grande
Aa #AA0000 sobre #CC9966 3,07:1 AA, texto grande
Aa #2A5B5B sobre #CC9966 3,03:1 AA, texto grande
Aa #BA5D2F sobre #FFCC66 3,00:1 AA, texto grande
Aa #303030 sobre #BA5D2F 2,95:1 No aprobado
Aa #303030 sobre #996666 2,79:1 No aprobado
Aa #303030 sobre #8F5F30 2,42:1 No aprobado
Aa #303030 sobre #696969 2,40:1 No aprobado
Aa #009999 sobre #FFCC66 2,34:1 No aprobado
Aa #754402 sobre #009999 2,33:1 No aprobado
Aa #330033 sobre #2A5B5B 2,31:1 No aprobado
Aa #330033 sobre #AA0000 2,28:1 No aprobado
Aa #009999 sobre #AA0000 2,22:1 No aprobado
Aa #2A5B5B sobre #009999 2,19:1 No aprobado
Aa #330033 sobre #754402 2,17:1 No aprobado
Aa #696969 sobre #CC9966 2,17:1 No aprobado
Aa #8F5F30 sobre #CC9966 2,16:1 No aprobado
Aa #996666 sobre #CC9966 1,87:1 No aprobado
Aa #754402 sobre #BA5D2F 1,82:1 No aprobado
Aa #BA5D2F sobre #CC9966 1,77:1 No aprobado
Aa #303030 sobre #2A5B5B 1,73:1 No aprobado
Aa #AA0000 sobre #BA5D2F 1,73:1 No aprobado
Aa #754402 sobre #996666 1,72:1 No aprobado
Aa #2A5B5B sobre #BA5D2F 1,71:1 No aprobado
Aa #303030 sobre #AA0000 1,70:1 No aprobado
Aa #CC9966 sobre #FFCC66 1,69:1 No aprobado
Aa #AA0000 sobre #996666 1,64:1 No aprobado
Aa #303030 sobre #754402 1,62:1 No aprobado
Aa #2A5B5B sobre #996666 1,62:1 No aprobado
Aa #009999 sobre #696969 1,57:1 No aprobado
Aa #009999 sobre #8F5F30 1,56:1 No aprobado
Aa #754402 sobre #8F5F30 1,49:1 No aprobado
Aa #754402 sobre #696969 1,48:1 No aprobado
Aa #AA0000 sobre #8F5F30 1,42:1 No aprobado
Aa #AA0000 sobre #696969 1,41:1 No aprobado
Aa #2A5B5B sobre #8F5F30 1,40:1 No aprobado
Aa #2A5B5B sobre #696969 1,39:1 No aprobado
Aa #009999 sobre #CC9966 1,38:1 No aprobado
Aa #009999 sobre #996666 1,35:1 No aprobado
Aa #330033 sobre #303030 1,34:1 No aprobado
Aa #009999 sobre #BA5D2F 1,28:1 No aprobado
Aa #696969 sobre #BA5D2F 1,23:1 No aprobado
Aa #8F5F30 sobre #BA5D2F 1,22:1 No aprobado
Aa #8F5F30 sobre #996666 1,16:1 No aprobado
Aa #696969 sobre #996666 1,16:1 No aprobado
Aa #754402 sobre #2A5B5B 1,06:1 No aprobado
Aa #BA5D2F sobre #996666 1,06:1 No aprobado
Aa #754402 sobre #AA0000 1,05:1 No aprobado
Aa #2A5B5B sobre #AA0000 1,01:1 No aprobado
Aa #8F5F30 sobre #696969 1,01:1 No aprobado

Paletas similares

#000000 #3D0000 #950101 #FF0000
4 colores
#E23E57 #88304E #522546 #311D3F
4 colores
#FF204E #A0153E #5D0E41 #00224D
4 colores
#030637 #3C0753 #720455 #910A67
4 colores
#1C0A00 #361500 #603601 #CC9544
4 colores
#252525 #FF0000 #AF0404 #414141
4 colores
#362222 #171010 #423F3E #2B2B2B
4 colores
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 colores