Color
Core Colors
The brand palette aligns with the standard colors of the official Chongqing University of Technology visual identity manual (2024.04), with primary blue as the base and gold as a secondary accent.
Primary buttons, links, logo body
Logo nodes, small decorative accents
Warnings, error states, accents
Body text and dark backgrounds
Light page backgrounds
Borders and separators
Official Value Reference
For print, prefer Pantone values and fall back to CMYK when unavailable; for screen, use RGB or hex values. In practice the Pantone color book is the final calibration standard.
| Color | Pantone value | CMYK value | RGB value | Hex value |
|---|---|---|---|---|
| Primary blue | 661C | C100 M50 Y0 K0 | R0 G104 B183 | #0068B7 |
| Gold | P 18-9 U | C15 M30 Y45 K0 | R221 G186 B143 | #DDBA8F |
| Black | BLACK | C100 M100 Y100 K100 | R0 G0 B0 | #000000 |
| Red | RED | C0 M100 Y100 K0 | R230 G0 B18 | #E60012 |
| White | - | C0 M0 Y0 K0 | R255 G255 B255 | #FFFFFF |
Gradient Ramps
The official VI provides gradient ramps built on primary blue for decorative atmosphere. Base values are the same as primary blue.
Gradient dark end, atmosphere decor, illustrations
Gradient midtone, light atmosphere backgrounds
Gradient warm end, decorative accents
Gradient light end, light atmosphere backgrounds
| Color | Hex value |
|---|---|
| Indigo | #596FB2 |
| Periwinkle | #BCC5E0 |
| Sand | #E1C4AB |
| Cream | #F3E7DD |
Gradients are only for large backgrounds, atmosphere illustrations, and decorative graphics — never for text, buttons, forms, or other UI elements. Keep the warm end (Sand, Cream) restrained so primary blue stays dominant.
Usage Ratios
Brand materials (covers, posters, banners, flags, etc.) follow the official VI color ratios: primary blue is the brand's main color and must make up more than 80%; gold is a secondary accent capped at 20%.
Software interfaces follow accessibility: neutral colors with ample whitespace form the base, Brand Blue is used for key actions, active highlights, and links, gold is limited to small accents such as logo nodes and decoration, and red is reserved for warnings and errors. A single viewport typically keeps only one solid brand-blue primary action button.
Semantic Colors
System feedback for success, warning, error, and info must follow the corresponding semantic colors defined in this spec. Besides color, support the state with icons, headings, or status text. Errors and danger states use the official red #E60012; never use gold as a success-state indicator.
Light & Dark Themes
Component development should apply semantic colors by each purpose rather than by raw shades. In the light theme, primary action buttons use Brand Blue; in the dark theme, they use Soft Blue with Ink Navy text. Illustrations, logos, and state colors must each be re-verified under both light and dark themes, rather than being crudely inverted.
Gradients
Gradient treatments are reserved for repository covers, social sharing images, and large brand illustrations. Basic elements such as interactive buttons, form inputs, data tables, and status labels use no gradients.
The official VI permits a theme gradient: all three stops (0%, 90%, 100%) use primary blue #0068B7 (CMYK C100 M50 Y0 K0), and the gradient only plays with transparency and layering, never changing hue.
| Stop | CMYK value | RGB value | Hex value |
|---|---|---|---|
| 0% | C100 M50 Y0 K0 | R0 G104 B183 | #0068B7 |
| 90% | C100 M50 Y0 K0 | R0 G104 B183 | #0068B7 |
| 100% | C100 M50 Y0 K0 | R0 G104 B183 | #0068B7 |
- Covers and sharing images: use the official theme gradient, with primary blue fading through transparency (e.g.
#0068B7 → rgba(0, 104, 183, 0)), never mixing in other hues. - Large atmosphere backgrounds: the light end of the official ramp may be used (
#BCC5E0 → #E1C4AB → #F3E7DD); the warm end must extend beyond the canvas or stay small so the image doesn't get too bright. - Gold acts only as a node/accent color and never enters the gradient's main axis.