Fundamentos

Color.

Los colores de la marca CCS y sus valores para pantalla e impresión. Los primarios y secundarios vienen del manual de marca; los neutros y degradados los define Solar a partir de ellos.

Uso restringido
Los colores primarios y secundarios son de la marca CCS. Si tu proyecto no es de la CCS, reemplázalos por los de tu marca. Revisa la licencia

01 · Primarios

Primarios

Manual de marca
Azul CCS
CMYK 100 / 74 / 11 / 2
RGB 0 / 61 / 166
HEX #003DA6
PANTONE 293 C
100%#003DA6
90%#1950AF
80%#3364B8
70%#4D77C1
60%#668BCA
50%#809ED2
40%#99B1DB
30%#B2C5E4
20%#CCD8ED
10%#E6ECF6
Verde CCS
CMYK 73 / 0 / 100 / 0
RGB 61 / 174 / 43
HEX #3DAE2B
PANTONE 361 C
100%#3DAE2B
90%#50B640
80%#64BE55
70%#77C66B
60%#8BCE80
50%#9ED695
40%#B1DFAA
30%#C5E7BF
20%#D8EFD5
10%#ECF7EA

02 · Secundarios

Secundarios

Manual de marca
Azul medio
CMYK 90 / 66 / 0 / 0
RGB 0 / 86 / 202
HEX #0056CA
100%#0056CA
90%#1967CF
80%#3378D5
70%#4D89DA
60%#669ADF
50%#80AAE4
40%#99BBEA
30%#B2CCEF
20%#CCDDF4
10%#E6EEFA
Azul claro
CMYK 73 / 37 / 0 / 0
RGB 58 / 141 / 222
HEX #3A8DDE
PANTONE 279 C
100%#3A8DDE
90%#4E98E1
80%#61A4E5
70%#75AFE8
60%#89BBEB
50%#9CC6EE
40%#B0D1F2
30%#C4DDF5
20%#D8E8F8
10%#EBF4FC
Verde brillante
CMYK 70 / 0 / 100 / 0
RGB 0 / 215 / 0
HEX #00D700
100%#00D700
90%#19DB19
80%#33DF33
70%#4DE34D
60%#66E766
50%#80EB80
40%#99EF99
30%#B2F3B2
20%#CCF7CC
10%#E6FBE6

Los matices son el mismo color con menos intensidad, del 100% al 10%.

03 · Neutros

Neutros

Solar
Ink
#0B1B3D · RGB 11 / 27 / 61
Texto principal y fondos oscuros.
Slate
#475569 · RGB 71 / 85 / 105
Texto secundario.
Line
#D7DDE8 · RGB 215 / 221 / 232
Bordes y separadores.
Line strong
#B7C2D6 · RGB 183 / 194 / 214
Borde de campos, selectores y casillas.
Bg
#F6F8FC · RGB 246 / 248 / 252
Relleno suave dentro de una superficie blanca.
Paper
#FFFFFF · RGB 255 / 255 / 255
Fondo de página y de superficies. Las superficies se separan con borde Line, no con relleno.

04 · Degradados

Degradados

Solar
Banner
#003DA6 → #00D700 · sólido hasta 50%
Icono
#003DA6 → #00D700 · vertical
Aurora
Ink con brillos azules y verdes

05 · Complementarios

Complementarios

Para presentaciones, gráficos e ilustraciones, cuando los colores de marca no alcanzan. Son parte del manual de marca. En la interfaz, advertencia y error usan sus propios colores; en los gráficos, el orden de las series está en Componentes › Gráficos.

Aa
Turquesa
RGB 0 / 146 / 159
HEX #00929F
Texto encima blanco (Lc 70)
100%#00929F
90%#199DA9
80%#33A8B2
70%#4DB3BC
60%#66BEC5
50%#80C8CF
40%#99D3D9
30%#B2DEE2
20%#CCE9EC
10%#E6F4F5
Aa
Violeta
RGB 122 / 79 / 201
HEX #7A4FC9
Texto encima blanco (Lc 83)
100%#7A4FC9
90%#8761CE
80%#9572D4
70%#A284D9
60%#AF95DF
50%#BCA7E4
40%#CAB9E9
30%#D7CAEF
20%#E4DCF4
10%#F2EDFA
Aa
Naranjo
RGB 224 / 102 / 27
HEX #E0661B
Texto encima blanco (Lc 67)
100%#E0661B
90%#E37532
80%#E68549
70%#E9945F
60%#ECA376
50%#F0B28D
40%#F3C2A4
30%#F6D1BB
20%#F9E0D1
10%#FCF0E8
Aa
Mostaza
RGB 214 / 158 / 0
HEX #D69E00
Texto encima Ink, solo texto grande (Lc 55)
100%#D69E00
90%#DAA819
80%#DEB133
70%#E2BB4D
60%#E6C566
50%#EACE80
40%#EFD899
30%#F3E2B2
20%#F7ECCC
10%#FBF5E6
Aa
Frambuesa
RGB 200 / 55 / 126
HEX #C8377E
Texto encima blanco (Lc 78)
100%#C8377E
90%#CE4B8B
80%#D35F98
70%#D873A5
60%#DE87B2
50%#E49BBE
40%#E9AFCB
30%#EEC3D8
20%#F4D7E5
10%#FAEBF2

Orden para gráficos

Usa los colores en este orden, sin saltarte ninguno. Así cada color queda junto a uno que se distingue bien, también para personas con daltonismo. Acompaña los datos con etiquetas, para no depender solo del color.

1
Azul medio
#0056CA
2
Turquesa
#00929F
3
Verde CCS
#3DAE2B
4
Violeta
#7A4FC9
5
Naranjo
#E0661B
6
Azul claro
#3A8DDE
7
Mostaza
#D69E00
8
Frambuesa
#C8377E

06 · Contraste

Contraste

Solar

Solar mide el contraste con APCA (Accessible Perceptual Contrast Algorithm). Predice mejor lo que vemos que la fórmula de WCAG 2: considera el tamaño y el grosor de la letra, y si el texto es claro sobre oscuro o al revés. El resultado se llama Lc: mientras más alto, más contraste.

Aa
Texto blanco sobre Naranjo
APCA Lc 67
WCAG 2 3,5:1
Aa
Texto Ink sobre Naranjo
APCA Lc 40
WCAG 2 4,9:1

Sobre Naranjo, WCAG 2 aprueba el texto oscuro y reprueba el blanco. APCA hace lo contrario, y coincide con lo que se ve.

Los colores y tokens de Solar ya cumplen: si los usas, no necesitas medir nada.

Las herramientas automáticas, como Lighthouse o axe, miden con WCAG 2 y pueden marcar como error combinaciones que APCA aprueba.