← Brand System
Color System

The Solmex Spectrum

Every color extracted and engineered from the logo—from sunrise orange to industrial steel.

01 — Primary Spectrum

Brand Colors

The signature gradient palette extracted directly from the Solmex logo. These are the primary colors that define our visual identity.

Primary Gradient
Solmex Signature
CSS
linear-gradient(180deg, #FF9C37, #FFD81C)
Core
Solmex Orange
HEX
#FF943B
RGB
255, 148, 59
CMYK
0, 50, 85, 0
Pantone
151 C
Alt
Solmex Orange Alt
HEX
#FF9C37
RGB
255, 156, 55
CMYK
0, 47, 83, 0
Pantone
1375 C
Mid
Solmex Amber
HEX
#FFAD5C
RGB
255, 173, 92
CMYK
0, 36, 68, 0
Pantone
1365 C
Light
Solmex Gold
HEX
#FFC67D
RGB
255, 198, 125
CMYK
0, 26, 55, 0
Pantone
134 C
Sunrise
Solmex Sunrise
HEX
#FFD91C
RGB
255, 217, 28
CMYK
0, 12, 92, 0
Pantone
116 C
02 — Gradients

Gradient Library

Official gradient configurations for digital and print applications.

Primary (Vertical)
linear-gradient(180deg, #FF9C37 0%, #FFD81C 100%)
Diagonal
linear-gradient(45deg, #FF943B 0%, #FFD91C 100%)
Horizontal
linear-gradient(90deg, #FF943B 0%, #FFD91C 100%)
Radial
radial-gradient(circle, #FFD91C 0%, #FF943B 100%)
03 — Industrial Neutrals

Neutral Palette

Steel-inspired neutrals that anchor the brand with industrial credibility.

Deepest
Carbon Black
HEX
#0A0A0A
RGB
10, 10, 10
Surface
Graphite
HEX
#1A1A1A
RGB
26, 26, 26
Primary Neutral
Steel Gray
HEX
#2C3E44
RGB
44, 62, 68
Secondary
Iron
HEX
#4A5568
RGB
74, 85, 104
Body Text
Concrete
HEX
#8B9197
RGB
139, 145, 151
Muted
Aluminum
HEX
#B0B5BA
RGB
176, 181, 186
Border
Mist
HEX
#E4E7E9
RGB
228, 231, 233
Background
Polar
HEX
#F8F9FA
RGB
248, 249, 250
04 — Semantic Signals

Functional Colors

System colors for status, alerts, and operational feedback.

Signal Red
Errors, alerts, critical status
#DC2626
Safety Green
Success, operational, verified
#16A34A
Warning Amber
Caution, pending, attention
#F59E0B
Info Blue
Information, links, highlights
#3B82F6
05 — Usage Guidelines

Color Distribution

Maintain visual balance with the 60-30-10 rule.

60%
30%
10%
Neutral Tones 60%
Primary Orange Spectrum 30%
Accent & Semantic 10%

Application Rules

  • Use neutrals for backgrounds, text, and large surface areas
  • Reserve orange gradient for key UI elements and CTAs
  • Apply accent colors sparingly for status and feedback
  • Never use multiple accent colors in close proximity
  • Maintain high contrast for all text elements
06 — Color Combinations

Do's & Don'ts

Examples of correct and incorrect color usage.

Solmex
Orange on Carbon Black
Solmex
Black on Orange Gradient
Solmex
Steel Gray on Polar
Solmex
Low contrast pairing
Solmex
Clashing accent colors
Solmex
Neutral on neutral
07 — Accessibility

WCAG Contrast Matrix

All text color combinations must meet WCAG 2.1 AA standards (4.5:1 for normal text, 3:1 for large text).

Foreground Background Contrast Ratio Normal Text (AA) Large Text (AA) AAA
Solmex Orange Carbon Black 6.24:1 PASS PASS FAIL
Solmex Sunrise Carbon Black 14.87:1 PASS PASS PASS
Carbon Black Polar 19.42:1 PASS PASS PASS
White Steel Gray 9.18:1 PASS PASS PASS
Concrete Carbon Black 6.87:1 PASS PASS FAIL
Solmex Orange White 2.56:1 FAIL FAIL FAIL
08 — Implementation

CSS Variables

Copy these CSS custom properties to implement the Solmex color system.

/* Grupo Solmex - Color System */
:root {
  /* Primary Brand Spectrum */
  --solmex-orange: #FF943B;
  --solmex-orange-alt: #FF9C37;
  --solmex-amber: #FFAD5C;
  --solmex-gold: #FFC67D;
  --solmex-sunrise: #FFD91C;
  
  /* Gradients */
  --gradient-primary: linear-gradient(180deg, #FF9C37 0%, #FFD81C 100%);
  --gradient-45: linear-gradient(45deg, #FF943B 0%, #FFD91C 100%);
  --gradient-90: linear-gradient(90deg, #FF943B 0%, #FFD91C 100%);
  
  /* Industrial Neutrals */
  --carbon-black: #0A0A0A;
  --graphite: #1A1A1A;
  --steel-gray: #2C3E44;
  --iron: #4A5568;
  --concrete: #8B9197;
  --aluminum: #B0B5BA;
  --mist: #E4E7E9;
  --polar: #F8F9FA;
  
  /* Semantic Colors */
  --signal-red: #DC2626;
  --safety-green: #16A34A;
  --warning-amber: #F59E0B;
  --info-blue: #3B82F6;
}