Registrarse Registrarse
Petrichor

Petrichor

Paleta de 12 colores · Colores fríos · Tonos mixtos · Armonía análoga

Volver a la biblioteca

Petrichor

Paleta de 12 colores · Colores fríos · Tonos mixtos · Armonía análoga

Editar
Colores apagados 12 colores Colores fríos Tonos mixtos Armonía análoga green blue soft muted
Me gusta 44
Colores 12

Variables CSS

:root {
  --c-muted-1: #445369;
  --c-muted-2: #586A76;
  --c-muted-3: #677081;
  --c-muted-4: #7A8AA1;
  --c-muted-5: #85A7B4;
  --c-muted-6: #97ADB6;
  --c-muted-7: #9FB3CC;
  --c-muted-8: #BBE3D8;
  --c-muted-9: #497173;
  --c-muted-10: #5B837F;
  --c-muted-11: #558B92;
  --c-muted-12: #6C8D7B;
}

Sobre esta paleta

Esta paleta de 12 colores apagados va de Serendipity (#BBE3D8), su tono más claro, a Into the Stratosphere (#445369), el más oscuro. Combina Into the Stratosphere, Blue Insignia, Flintstone, Hilo Bay, Equanimity, Pacific Bliss, Stellar Blue, Serendipity, Vining Ivy, Stream Burble, Dusty Turquoise y Hanging Vine en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 1 cumple el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #445369 sobre #BBE3D8, con 5,62: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

Into the Stratosphere #445369
RGB
rgb(68, 83, 105)
HSL
hsl(216, 21%, 34%)
Luminancia
0,084
Blue Insignia #586A76
RGB
rgb(88, 106, 118)
HSL
hsl(204, 15%, 40%)
Luminancia
0,137
Flintstone #677081
RGB
rgb(103, 112, 129)
HSL
hsl(219, 11%, 45%)
Luminancia
0,161
Hilo Bay #7A8AA1
RGB
rgb(122, 138, 161)
HSL
hsl(215, 17%, 55%)
Luminancia
0,249
Equanimity #85A7B4
RGB
rgb(133, 167, 180)
HSL
hsl(197, 24%, 61%)
Luminancia
0,359
Pacific Bliss #97ADB6
RGB
rgb(151, 173, 182)
HSL
hsl(197, 18%, 65%)
Luminancia
0,398
Stellar Blue #9FB3CC
RGB
rgb(159, 179, 204)
HSL
hsl(213, 31%, 71%)
Luminancia
0,440
Serendipity #BBE3D8
RGB
rgb(187, 227, 216)
HSL
hsl(164, 42%, 81%)
Luminancia
0,705
Vining Ivy #497173
RGB
rgb(73, 113, 115)
HSL
hsl(183, 22%, 37%)
Luminancia
0,145
Stream Burble #5B837F
RGB
rgb(91, 131, 127)
HSL
hsl(174, 18%, 44%)
Luminancia
0,200
Dusty Turquoise #558B92
RGB
rgb(85, 139, 146)
HSL
hsl(187, 26%, 45%)
Luminancia
0,225
Hanging Vine #6C8D7B
RGB
rgb(108, 141, 123)
HSL
hsl(147, 13%, 49%)
Luminancia
0,237

Contraste y accesibilidad

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

Aa #445369 sobre #BBE3D8 5,62:1 AA
Aa #586A76 sobre #BBE3D8 4,04:1 AA, texto grande
Aa #BBE3D8 sobre #497173 3,88:1 AA, texto grande
Aa #445369 sobre #9FB3CC 3,64:1 AA, texto grande
Aa #677081 sobre #BBE3D8 3,58:1 AA, texto grande
Aa #445369 sobre #97ADB6 3,34:1 AA, texto grande
Aa #445369 sobre #85A7B4 3,05:1 AA, texto grande
Aa #BBE3D8 sobre #5B837F 3,02:1 AA, texto grande
Aa #BBE3D8 sobre #558B92 2,75:1 No aprobado
Aa #BBE3D8 sobre #6C8D7B 2,63:1 No aprobado
Aa #586A76 sobre #9FB3CC 2,62:1 No aprobado
Aa #7A8AA1 sobre #BBE3D8 2,52:1 No aprobado
Aa #9FB3CC sobre #497173 2,52:1 No aprobado
Aa #586A76 sobre #97ADB6 2,40:1 No aprobado
Aa #677081 sobre #9FB3CC 2,33:1 No aprobado
Aa #97ADB6 sobre #497173 2,30:1 No aprobado
Aa #445369 sobre #7A8AA1 2,22:1 No aprobado
Aa #586A76 sobre #85A7B4 2,19:1 No aprobado
Aa #445369 sobre #6C8D7B 2,13:1 No aprobado
Aa #677081 sobre #97ADB6 2,13:1 No aprobado
Aa #85A7B4 sobre #497173 2,10:1 No aprobado
Aa #445369 sobre #558B92 2,04:1 No aprobado
Aa #9FB3CC sobre #5B837F 1,96:1 No aprobado
Aa #677081 sobre #85A7B4 1,94:1 No aprobado
Aa #445369 sobre #5B837F 1,86:1 No aprobado
Aa #85A7B4 sobre #BBE3D8 1,84:1 No aprobado
Aa #97ADB6 sobre #5B837F 1,79:1 No aprobado
Aa #9FB3CC sobre #558B92 1,78:1 No aprobado
Aa #9FB3CC sobre #6C8D7B 1,71:1 No aprobado
Aa #97ADB6 sobre #BBE3D8 1,68:1 No aprobado
Aa #7A8AA1 sobre #9FB3CC 1,64:1 No aprobado
Aa #85A7B4 sobre #5B837F 1,64:1 No aprobado
Aa #97ADB6 sobre #558B92 1,63:1 No aprobado
Aa #586A76 sobre #7A8AA1 1,60:1 No aprobado
Aa #445369 sobre #677081 1,57:1 No aprobado
Aa #97ADB6 sobre #6C8D7B 1,56:1 No aprobado
Aa #7A8AA1 sobre #497173 1,54:1 No aprobado
Aa #9FB3CC sobre #BBE3D8 1,54:1 No aprobado
Aa #586A76 sobre #6C8D7B 1,53:1 No aprobado
Aa #7A8AA1 sobre #97ADB6 1,50:1 No aprobado
Aa #85A7B4 sobre #558B92 1,49:1 No aprobado
Aa #586A76 sobre #558B92 1,47:1 No aprobado
Aa #497173 sobre #6C8D7B 1,47:1 No aprobado
Aa #445369 sobre #497173 1,45:1 No aprobado
Aa #85A7B4 sobre #6C8D7B 1,43:1 No aprobado
Aa #677081 sobre #7A8AA1 1,42:1 No aprobado
Aa #497173 sobre #558B92 1,41:1 No aprobado
Aa #445369 sobre #586A76 1,39:1 No aprobado
Aa #7A8AA1 sobre #85A7B4 1,37:1 No aprobado
Aa #677081 sobre #6C8D7B 1,36:1 No aprobado
Aa #586A76 sobre #5B837F 1,34:1 No aprobado
Aa #677081 sobre #558B92 1,30:1 No aprobado
Aa #497173 sobre #5B837F 1,28:1 No aprobado
Aa #7A8AA1 sobre #5B837F 1,20:1 No aprobado
Aa #85A7B4 sobre #9FB3CC 1,20:1 No aprobado
Aa #677081 sobre #5B837F 1,19:1 No aprobado
Aa #5B837F sobre #6C8D7B 1,15:1 No aprobado
Aa #586A76 sobre #677081 1,13:1 No aprobado
Aa #85A7B4 sobre #97ADB6 1,10:1 No aprobado
Aa #5B837F sobre #558B92 1,10:1 No aprobado
Aa #7A8AA1 sobre #558B92 1,09:1 No aprobado
Aa #97ADB6 sobre #9FB3CC 1,09:1 No aprobado
Aa #677081 sobre #497173 1,08:1 No aprobado
Aa #586A76 sobre #497173 1,04:1 No aprobado
Aa #7A8AA1 sobre #6C8D7B 1,04:1 No aprobado
Aa #558B92 sobre #6C8D7B 1,04:1 No aprobado

Paletas similares

#222831 #393E46 #00ADB5 #EEEEEE
4 colores
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colores
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colores
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colores
#27374D #526D82 #9DB2BF #DDE6ED
4 colores
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colores
#E4F9F5 #30E3CA #11999E #40514E
4 colores
#F0F5F9 #C9D6DF #52616B #1E2022
4 colores