Sharpie color palette
ConsumerSharpie's brand color identity centers on bold black and white, reflecting its iconic permanent marker design and high contrast visual style. The palette is minimalistic, emphasizing clarity and legibility.
sharpie.comSharpie colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sharpie BlackPrimary35, 31, 32
- Sharpie WhiteSecondary255, 255, 255
- Sharpie YellowAccent255, 205, 0
Surfaces
Page, cards and dividers.- Sharpie Light GrayBackground245, 245, 245
- Sharpie Medium GraySurface224, 224, 224
- Sharpie Border GrayBorder189, 189, 189
Text
Three tiers of copy.- Sharpie BlackText35, 31, 32
- Sharpie Text GraySecondary text117, 117, 117
- Sharpie Muted GrayMuted text158, 158, 158
Semantic
Feedback and state colors.- Sharpie GreenSuccess67, 160, 71
- Sharpie Warning YellowWarning255, 179, 0
- Sharpie RedError229, 57, 53
- Sharpie BlueInfo30, 136, 229
Use Sharpie's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sharpie-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1E88E5;
--error: #E53935;
--accent: #FFCD00;
--border: #BDBDBD;
--primary: #231F20;
--success: #43A047;
--surface: #E0E0E0;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #9E9E9E;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.5:1
Fail
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Sharpie gray and neutral colors
The quiet part of the Sharpie palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sharpie Light GrayBackground
- HEX
- RGB
- HSL
- Sharpie Medium GraySurface
- HEX
- RGB
- HSL
- Sharpie Border GrayBorder
- HEX
- RGB
- HSL
- Sharpie BlackText
- HEX
- RGB
- HSL
- Sharpie Text GraySecondary text
- HEX
- RGB
- HSL
- Sharpie Muted GrayMuted text
- HEX
- RGB
- HSL
About Sharpie's colors
Sharpie's color palette is rooted in stark contrast, using black and white as core identifiers. The addition of yellow as an accent evokes energy and creativity.
Black and white provide maximum legibility and brand recognition.
Yellow accent draws attention to key elements.
Gray tones support hierarchy and depth in UI.
Psychology
Black conveys permanence, authority, and boldness, aligning with Sharpie's product promise. Yellow adds a sense of creativity and optimism.
Evolution
Sharpie's palette has remained consistent, with black and white always at the forefront. Minor adjustments have been made to accent and gray tones for digital clarity.
Where Sharpie uses each color
- Primary
Sharpie Black is used for the logo, navigation bar, and primary headlines.
- Secondary
Sharpie White is used for backgrounds and negative space.
- Accent
Sharpie Yellow highlights call-to-action buttons and promotional banners.
- Backgrounds
Sharpie Light Gray and Medium Gray are used for UI backgrounds and card surfaces.
- Text
Sharpie Black and Text Gray are used for primary and secondary text respectively.
- Semantic
Green, Yellow, Red, and Blue are used for status indicators and alerts in digital interfaces.
Sharpie color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Sharpie brand color is Sharpie Black, with the hex code #231F20.
Sharpie Black is RGB(35, 31, 32) and CMYK(0, 11, 9, 86). The hex code is #231F20.
Sharpie uses Light Gray (#F5F5F5), Medium Gray (#E0E0E0), Border Gray (#BDBDBD), and Text Gray (#757575) for backgrounds, surfaces, borders, and secondary text.
Use Sharpie Black and White for primary brand elements, with Yellow as an accent for highlights. Gray tones provide structure and hierarchy in digital and print layouts.
The secondary color is Sharpie White, #FFFFFF, and the accent is Sharpie Yellow, #FFCD00. Together with the primary they make up the three brand colors at the top of this page.
2 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Sharpie's colors consistently when it generates UI.
Make something in the spirit of Sharpie
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.