Color

CertiK Red, supporting neutrals, theme guidance, and contrast.

CertiK Red

One signature brand color, with separate digital values for Light and Dark modes. Use the value for the theme you are designing; print uses Pantone or CMYK. Do not convert between digital and print values.

Digital: Light mode
#C70042
Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
Dark mode
#EB0052
Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
CMYK: 28 / 100 / 68 / 0
Pantone: 7427 C

Core palette

CertiK Red is the accent. White, light gray, gray, and black carry the layout and keep the brand color distinctive. The four neutrals are fixed values in both themes; product interfaces use the Design System gray scale instead.

CertiK Red#C70042
White#FFFFFF
Light Gray#F0F0F0
Gray#646464
Black#000000

Digital ramps

Twelve supporting steps for red and gray in each theme. Choose from these approved values instead of tinting colors by hand.

Red

Light

Dark

123456789101112

Red scale values in light and dark themes
Step	Light · HEX	Dark · HEX
1	`#FFFCFC` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#180E0F` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
2	`#FFF7F8` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#1F1415` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
3	`#FFEAEB` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#3E0F17` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
4	`#FFDCDE` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#55061A` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
5	`#FFCED0` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#660B22` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
6	`#FBBEC2` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#78192D` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
7	`#F3ABAF` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#93273C` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
8	`#E99198` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#C1324F` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
9	`#C70042` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#EB0052` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
10	`#B60035` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#C53652` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
11	`#CF1548` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#FF8E9C` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
12	`#671324` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#FFCFD3` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.

Gray

Light

Dark

123456789101112

Gray scale values in light and dark themes
Step	Light · HEX	Dark · HEX
1	`#FCFCFC` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#111111` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
2	`#F9F9F9` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#191919` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
3	`#F0F0F0` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#222222` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
4	`#E8E8E8` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#2A2A2A` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
5	`#E0E0E0` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#313131` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
6	`#D9D9D9` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#3A3A3A` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
7	`#CECECE` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#484848` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
8	`#BBBBBB` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#606060` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
9	`#8D8D8D` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#6E6E6E` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
10	`#838383` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#7B7B7B` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
11	`#646464` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#B4B4B4` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.
12	`#202020` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.	`#EEEEEE` Hover or focus to inspect every color format. Press Arrow Down to access copy actions.

Dark theme

CertiK Red remains one named brand color across themes, with one value for Light mode and one for Dark mode. On dark surfaces, small red text does not meet AA; reserve it for headings, labels, or sufficiently large text.

Accessibility

Use the combinations below to keep text readable and accessible. Recommended pairs support normal text; limited pairs should only be used for large text. Dark theme pairs are listed separately.

Recommended combinations

Start with Black on White for body text, or White on Black for dark surfaces. Use CertiK Red for links, labels, and short emphasis; do not set body text in red.

Black on White
Text color
Black
Background color
White
Contrast ratio
21.00:1 · WCAG AAA
White on Black
Text color
White
Background color
Black
Contrast ratio
21.00:1 · WCAG AAA
CertiK Red on White
Text color
CertiK Red
Background color
White
Contrast ratio
5.99:1 · WCAG AA
White on CertiK Red
Text color
White
Background color
CertiK Red
Contrast ratio
5.99:1 · WCAG AA
Black on Light Gray
Text color
Black
Background color
Light Gray
Contrast ratio
18.43:1 · WCAG AAA
Gray on White
Text color
Gray
Background color
White
Contrast ratio
5.92:1 · WCAG AA
Gray on Light Gray
Text color
Gray
Background color
Light Gray
Contrast ratio
5.19:1 · WCAG AA
CertiK Red on Light Gray
Text color
CertiK Red
Background color
Light Gray
Contrast ratio
5.25:1 · WCAG AA

Large text only

Limited use: reserve these pairs for text at least 24 CSS px. Do not use for body copy, small labels, or helper text. This restriction applies in either direction.

CertiK Red on Black
Large text only3.51:1 · WCAG AA for large text
Gray on Black
Large text only3.55:1 · WCAG AA for large text

Dark theme pairs

Dark mode values: CertiK Red switches to its Dark mode value and surfaces come from the dark gray ramp. White on a dark surface carries body text; red on dark surfaces is for headings, labels, and text at least 24 CSS px.

White on Gray 1 (dark surface)
Normal & large text18.88:1 · WCAG AAA
CertiK Red on Black
Normal & large text4.65:1 · WCAG AA
CertiK Red on Gray 1 (dark surface)
Large text only4.19:1 · WCAG AA for large text
CertiK Red on Gray 3 (dark raised surface)
Large text only3.53:1 · WCAG AA for large text
White on CertiK Red
Normal & large text4.51:1 · WCAG AA

Every distinct core color pair, listed once. Swapping text and background keeps the same ratio and WCAG level; the recommended examples above show useful directions. Values use the fixed core palette rather than theme-adaptive text colors.

Full contrast matrix
Color pair	Ratio	Text use
Black / White	21.00:1	Normal & large textWCAG AAA
CertiK Red / White	5.99:1	Normal & large textWCAG AA
Black / Light Gray	18.43:1	Normal & large textWCAG AAA
Gray / White	5.92:1	Normal & large textWCAG AA
Gray / Light Gray	5.19:1	Normal & large textWCAG AA
CertiK Red / Light Gray	5.25:1	Normal & large textWCAG AA
CertiK Red / Black	3.51:1	Large text onlyWCAG AA for large text
Gray / Black	3.55:1	Large text onlyWCAG AA for large text
White / Light Gray	1.14:1	Do not use for text
CertiK Red / Gray	1.01:1	Do not use for text

WCAG 2: AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Ratios shown to two decimal places.

Misuse

Use approved brand colors and gradients with restraint.

Do not overuse CertiK Red in product or web interfaces.
Do not use unapproved gradients.
Do not pair low-contrast colors.
Do not set body text in red.
Do not lead with colors outside the approved palette.
Do not use poorly matched color combinations.

Downloads

Download color assets

View all downloads

CertiK Red

Core palette

Digital ramps

Red

Color values

Gray

Color values

Dark theme

Accessibility

Recommended combinations

Black on White

White on Black

CertiK Red on White

White on CertiK Red

Black on Light Gray

Gray on White

Gray on Light Gray

CertiK Red on Light Gray

Large text only

CertiK Red on Black

Gray on Black

Dark theme pairs

White on Gray 1 (dark surface)

CertiK Red on Black

CertiK Red on Gray 1 (dark surface)

CertiK Red on Gray 3 (dark raised surface)

White on CertiK Red

View full contrast matrix

Misuse

Downloads