Registrarse Registrarse
Terracarbon

Terracarbon

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía análoga

Volver a la biblioteca

Terracarbon

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía análoga

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía análoga polyphrog retro carbon
Me gusta 15
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #555500;
  --c-vibrant-2: #888800;
  --c-vibrant-3: #FFAA55;
  --c-vibrant-4: #AA5500;
  --c-vibrant-5: #550000;
  --c-vibrant-6: #AA0000;
  --c-vibrant-7: #FF5555;
  --c-vibrant-8: #FFFFFF;
  --c-vibrant-9: #AAAAAA;
  --c-vibrant-10: #555555;
  --c-vibrant-11: #000000;
  --c-vibrant-12: #0055AA;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de White (#FFFFFF), su tono más claro, a Black (#000000), el más oscuro. Combina Douro, Drably Olive, Soul Side, Tijolo, Soooo Bloody, Heartbeat, Fluorescent Red, White, Dhūsar Grey, Stone Cold, Black y Blue Lobster en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 14 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #FFFFFF sobre #000000, con 21: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

Douro #555500
RGB
rgb(85, 85, 0)
HSL
hsl(60, 100%, 17%)
Luminancia
0,084
Drably Olive #888800
RGB
rgb(136, 136, 0)
HSL
hsl(60, 100%, 27%)
Luminancia
0,228
Soul Side #FFAA55
RGB
rgb(255, 170, 85)
HSL
hsl(30, 100%, 67%)
Luminancia
0,507
Tijolo #AA5500
RGB
rgb(170, 85, 0)
HSL
hsl(30, 100%, 33%)
Luminancia
0,150
Soooo Bloody #550000
RGB
rgb(85, 0, 0)
HSL
hsl(0, 100%, 17%)
Luminancia
0,019
Heartbeat #AA0000
RGB
rgb(170, 0, 0)
HSL
hsl(0, 100%, 33%)
Luminancia
0,086
Fluorescent Red #FF5555
RGB
rgb(255, 85, 85)
HSL
hsl(0, 100%, 67%)
Luminancia
0,284
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminancia
1,000
Dhūsar Grey #AAAAAA
RGB
rgb(170, 170, 170)
HSL
hsl(0, 0%, 67%)
Luminancia
0,402
Stone Cold #555555
RGB
rgb(85, 85, 85)
HSL
hsl(0, 0%, 33%)
Luminancia
0,091
Black #000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Luminancia
0,000
Blue Lobster #0055AA
RGB
rgb(0, 85, 170)
HSL
hsl(210, 100%, 33%)
Luminancia
0,094

Contraste y accesibilidad

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

Aa #FFFFFF sobre #000000 21,00:1 AAA
Aa #550000 sobre #FFFFFF 15,15:1 AAA
Aa #FFAA55 sobre #000000 11,13:1 AAA
Aa #AAAAAA sobre #000000 9,04:1 AAA
Aa #FFAA55 sobre #550000 8,03:1 AAA
Aa #555500 sobre #FFFFFF 7,82:1 AAA
Aa #AA0000 sobre #FFFFFF 7,75:1 AAA
Aa #FFFFFF sobre #555555 7,46:1 AAA
Aa #FFFFFF sobre #0055AA 7,29:1 AAA
Aa #FF5555 sobre #000000 6,68:1 AA
Aa #550000 sobre #AAAAAA 6,52:1 AA
Aa #888800 sobre #000000 5,57:1 AA
Aa #AA5500 sobre #FFFFFF 5,24:1 AA
Aa #550000 sobre #FF5555 4,82:1 AA
Aa #555500 sobre #FFAA55 4,15:1 AA, texto grande
Aa #FFAA55 sobre #AA0000 4,11:1 AA, texto grande
Aa #888800 sobre #550000 4,02:1 AA, texto grande
Aa #AA5500 sobre #000000 4,01:1 AA, texto grande
Aa #FFAA55 sobre #555555 3,95:1 AA, texto grande
Aa #FFAA55 sobre #0055AA 3,87:1 AA, texto grande
Aa #888800 sobre #FFFFFF 3,77:1 AA, texto grande
Aa #555500 sobre #AAAAAA 3,37:1 AA, texto grande
Aa #AA0000 sobre #AAAAAA 3,34:1 AA, texto grande
Aa #AAAAAA sobre #555555 3,21:1 AA, texto grande
Aa #FF5555 sobre #FFFFFF 3,14:1 AA, texto grande
Aa #AAAAAA sobre #0055AA 3,14:1 AA, texto grande
Aa #AA5500 sobre #550000 2,89:1 No aprobado
Aa #000000 sobre #0055AA 2,88:1 No aprobado
Aa #555555 sobre #000000 2,82:1 No aprobado
Aa #FFAA55 sobre #AA5500 2,78:1 No aprobado
Aa #AA0000 sobre #000000 2,71:1 No aprobado
Aa #555500 sobre #000000 2,69:1 No aprobado
Aa #555500 sobre #FF5555 2,49:1 No aprobado
Aa #AA0000 sobre #FF5555 2,47:1 No aprobado
Aa #FF5555 sobre #555555 2,37:1 No aprobado
Aa #FF5555 sobre #0055AA 2,32:1 No aprobado
Aa #FFFFFF sobre #AAAAAA 2,32:1 No aprobado
Aa #AA5500 sobre #AAAAAA 2,26:1 No aprobado
Aa #550000 sobre #0055AA 2,08:1 No aprobado
Aa #555500 sobre #888800 2,07:1 No aprobado
Aa #888800 sobre #AA0000 2,06:1 No aprobado
Aa #550000 sobre #555555 2,03:1 No aprobado
Aa #888800 sobre #FFAA55 2,00:1 No aprobado
Aa #888800 sobre #555555 1,98:1 No aprobado
Aa #550000 sobre #AA0000 1,95:1 No aprobado
Aa #555500 sobre #550000 1,94:1 No aprobado
Aa #888800 sobre #0055AA 1,93:1 No aprobado
Aa #FFAA55 sobre #FFFFFF 1,89:1 No aprobado
Aa #FFAA55 sobre #FF5555 1,67:1 No aprobado
Aa #AA5500 sobre #FF5555 1,67:1 No aprobado
Aa #888800 sobre #AAAAAA 1,62:1 No aprobado
Aa #555500 sobre #AA5500 1,49:1 No aprobado
Aa #AA5500 sobre #AA0000 1,48:1 No aprobado
Aa #AA5500 sobre #555555 1,42:1 No aprobado
Aa #888800 sobre #AA5500 1,39:1 No aprobado
Aa #AA5500 sobre #0055AA 1,39:1 No aprobado
Aa #550000 sobre #000000 1,39:1 No aprobado
Aa #FF5555 sobre #AAAAAA 1,35:1 No aprobado
Aa #FFAA55 sobre #AAAAAA 1,23:1 No aprobado
Aa #888800 sobre #FF5555 1,20:1 No aprobado
Aa #555500 sobre #0055AA 1,07:1 No aprobado
Aa #AA0000 sobre #0055AA 1,06:1 No aprobado
Aa #555500 sobre #555555 1,05:1 No aprobado
Aa #AA0000 sobre #555555 1,04:1 No aprobado
Aa #555555 sobre #0055AA 1,02:1 No aprobado
Aa #555500 sobre #AA0000 1,01:1 No aprobado

Paletas similares

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colores
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colores
#FFF8EA #9E7676 #815B5B #594545
4 colores
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colores
#F67280 #C06C84 #6C5B7B #355C7D
4 colores
#2B2E4A #E84545 #903749 #53354A
4 colores
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colores
#A9907E #F3DEBA #ABC4AA #675D50
4 colores