Registrarse Registrarse
3x4 Rgb

3x4 Rgb

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

Volver a la biblioteca

3x4 Rgb

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

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía complementaria green red blue contrast
Me gusta 18
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #004D23;
  --c-vibrant-2: #807100;
  --c-vibrant-3: #8EC724;
  --c-vibrant-4: #D5EDD8;
  --c-vibrant-5: #4D002A;
  --c-vibrant-6: #BD2F3E;
  --c-vibrant-7: #FA7DAD;
  --c-vibrant-8: #FAD0EB;
  --c-vibrant-9: #000C4D;
  --c-vibrant-10: #2D1AD9;
  --c-vibrant-11: #0090C9;
  --c-vibrant-12: #47D2D9;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Silky Mint (#D5EDD8), su tono más claro, a Kantor Blue (#000C4D), el más oscuro. Combina Lemon Balm Green, Sunlit Kelp Green, Thick Green, Silky Mint, Fig Balsamic, Crimson Cloud, Erythrosine, Little Smile, Kantor Blue, Lapis on Neptune, Dynamic Blue y Medium Turquoise en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 20 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #D5EDD8 sobre #000C4D, con 14,6: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

Lemon Balm Green #004D23
RGB
rgb(0, 77, 35)
HSL
hsl(147, 100%, 15%)
Luminancia
0,054
Sunlit Kelp Green #807100
RGB
rgb(128, 113, 0)
HSL
hsl(53, 100%, 25%)
Luminancia
0,164
Thick Green #8EC724
RGB
rgb(142, 199, 36)
HSL
hsl(81, 69%, 46%)
Luminancia
0,467
Silky Mint #D5EDD8
RGB
rgb(213, 237, 216)
HSL
hsl(128, 40%, 88%)
Luminancia
0,797
Fig Balsamic #4D002A
RGB
rgb(77, 0, 42)
HSL
hsl(327, 100%, 15%)
Luminancia
0,017
Crimson Cloud #BD2F3E
RGB
rgb(189, 47, 62)
HSL
hsl(354, 60%, 46%)
Luminancia
0,132
Erythrosine #FA7DAD
RGB
rgb(250, 125, 173)
HSL
hsl(337, 93%, 74%)
Luminancia
0,380
Little Smile #FAD0EB
RGB
rgb(250, 208, 235)
HSL
hsl(321, 81%, 90%)
Luminancia
0,714
Kantor Blue #000C4D
RGB
rgb(0, 12, 77)
HSL
hsl(231, 100%, 15%)
Luminancia
0,008
Lapis on Neptune #2D1AD9
RGB
rgb(45, 26, 217)
HSL
hsl(246, 79%, 48%)
Luminancia
0,063
Dynamic Blue #0090C9
RGB
rgb(0, 144, 201)
HSL
hsl(197, 100%, 39%)
Luminancia
0,242
Medium Turquoise #47D2D9
RGB
rgb(71, 210, 217)
HSL
hsl(183, 66%, 56%)
Luminancia
0,524

Contraste y accesibilidad

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

Aa #D5EDD8 sobre #000C4D 14,60:1 AAA
Aa #FAD0EB sobre #000C4D 13,18:1 AAA
Aa #D5EDD8 sobre #4D002A 12,55:1 AAA
Aa #4D002A sobre #FAD0EB 11,33:1 AAA
Aa #000C4D sobre #47D2D9 9,91:1 AAA
Aa #8EC724 sobre #000C4D 8,92:1 AAA
Aa #4D002A sobre #47D2D9 8,52:1 AAA
Aa #004D23 sobre #D5EDD8 8,12:1 AAA
Aa #8EC724 sobre #4D002A 7,67:1 AAA
Aa #D5EDD8 sobre #2D1AD9 7,49:1 AAA
Aa #FA7DAD sobre #000C4D 7,42:1 AAA
Aa #004D23 sobre #FAD0EB 7,33:1 AAA
Aa #FAD0EB sobre #2D1AD9 6,76:1 AA
Aa #4D002A sobre #FA7DAD 6,38:1 AA
Aa #004D23 sobre #47D2D9 5,51:1 AA
Aa #2D1AD9 sobre #47D2D9 5,08:1 AA
Aa #000C4D sobre #0090C9 5,03:1 AA
Aa #004D23 sobre #8EC724 4,96:1 AA
Aa #D5EDD8 sobre #BD2F3E 4,65:1 AA
Aa #8EC724 sobre #2D1AD9 4,57:1 AA
Aa #4D002A sobre #0090C9 4,32:1 AA, texto grande
Aa #BD2F3E sobre #FAD0EB 4,20:1 AA, texto grande
Aa #004D23 sobre #FA7DAD 4,12:1 AA, texto grande
Aa #807100 sobre #D5EDD8 3,96:1 AA, texto grande
Aa #FA7DAD sobre #2D1AD9 3,80:1 AA, texto grande
Aa #807100 sobre #000C4D 3,69:1 AA, texto grande
Aa #807100 sobre #FAD0EB 3,57:1 AA, texto grande
Aa #807100 sobre #4D002A 3,17:1 AA, texto grande
Aa #BD2F3E sobre #47D2D9 3,16:1 AA, texto grande
Aa #BD2F3E sobre #000C4D 3,14:1 AA, texto grande
Aa #D5EDD8 sobre #0090C9 2,90:1 No aprobado
Aa #8EC724 sobre #BD2F3E 2,84:1 No aprobado
Aa #004D23 sobre #0090C9 2,80:1 No aprobado
Aa #4D002A sobre #BD2F3E 2,70:1 No aprobado
Aa #807100 sobre #47D2D9 2,68:1 No aprobado
Aa #FAD0EB sobre #0090C9 2,62:1 No aprobado
Aa #2D1AD9 sobre #0090C9 2,58:1 No aprobado
Aa #807100 sobre #8EC724 2,42:1 No aprobado
Aa #BD2F3E sobre #FA7DAD 2,36:1 No aprobado
Aa #004D23 sobre #807100 2,05:1 No aprobado
Aa #807100 sobre #FA7DAD 2,01:1 No aprobado
Aa #D5EDD8 sobre #FA7DAD 1,97:1 No aprobado
Aa #0090C9 sobre #47D2D9 1,97:1 No aprobado
Aa #000C4D sobre #2D1AD9 1,95:1 No aprobado
Aa #807100 sobre #2D1AD9 1,89:1 No aprobado
Aa #004D23 sobre #000C4D 1,80:1 No aprobado
Aa #FA7DAD sobre #FAD0EB 1,78:1 No aprobado
Aa #8EC724 sobre #0090C9 1,77:1 No aprobado
Aa #004D23 sobre #BD2F3E 1,75:1 No aprobado
Aa #4D002A sobre #2D1AD9 1,68:1 No aprobado
Aa #8EC724 sobre #D5EDD8 1,64:1 No aprobado
Aa #BD2F3E sobre #2D1AD9 1,61:1 No aprobado
Aa #BD2F3E sobre #0090C9 1,60:1 No aprobado
Aa #004D23 sobre #4D002A 1,55:1 No aprobado
Aa #8EC724 sobre #FAD0EB 1,48:1 No aprobado
Aa #D5EDD8 sobre #47D2D9 1,47:1 No aprobado
Aa #FA7DAD sobre #0090C9 1,47:1 No aprobado
Aa #807100 sobre #0090C9 1,36:1 No aprobado
Aa #FA7DAD sobre #47D2D9 1,34:1 No aprobado
Aa #FAD0EB sobre #47D2D9 1,33:1 No aprobado
Aa #8EC724 sobre #FA7DAD 1,20:1 No aprobado
Aa #807100 sobre #BD2F3E 1,18:1 No aprobado
Aa #4D002A sobre #000C4D 1,16:1 No aprobado
Aa #8EC724 sobre #47D2D9 1,11:1 No aprobado
Aa #D5EDD8 sobre #FAD0EB 1,11:1 No aprobado
Aa #004D23 sobre #2D1AD9 1,08: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