Post-it color palette
ConsumerPost-it is known for its vibrant yellow color, which is instantly recognizable and synonymous with sticky notes. The brand's palette emphasizes bright, cheerful tones with a focus on usability and visibility.
post-it.comPost-it colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Post-it Canary YellowPrimary255, 251, 0
- Post-it GoldSecondary255, 217, 0
- Post-it Orange AccentAccent255, 111, 0
Surfaces
Page, cards and dividers.- Post-it WhiteBackground255, 255, 255
- Post-it Pale YellowSurface255, 253, 231
- Post-it Light GrayBorder224, 224, 224
Text
Three tiers of copy.- Post-it CharcoalText33, 33, 33
- Post-it Medium GraySecondary text117, 117, 117
- Post-it Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Post-it Lime GreenSuccess139, 195, 74
- Post-it AmberWarning255, 193, 7
- Post-it RedError211, 47, 47
- Post-it BlueInfo2, 136, 209
Use Post-it's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
post-it-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #D32F2F;
--accent: #FF6F00;
--border: #E0E0E0;
--primary: #FFFB00;
--success: #8BC34A;
--surface: #FFFDE7;
--warning: #FFC107;
--secondary: #FFD900;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--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
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Post-it background, border and text colors
The quiet part of the Post-it palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Post-it WhiteBackground
- HEX
- RGB
- HSL
- Post-it Pale YellowSurface
- HEX
- RGB
- HSL
- Post-it Light GrayBorder
- HEX
- RGB
- HSL
- Post-it CharcoalText
- HEX
- RGB
- HSL
- Post-it Medium GraySecondary text
- HEX
- RGB
- HSL
- Post-it Muted GrayMuted text
- HEX
- RGB
- HSL
About Post-it's colors
Post-it's color palette is built around high-visibility yellow, supported by bright accent colors and neutral grays for clarity. The palette is designed for maximum legibility and instant brand recognition.
Primary yellow is complemented by orange and gold accents.
Neutrals balance the vibrancy for UI clarity.
Bright colors are used for semantic feedback (success, warning, error).
Psychology
The yellow evokes optimism, creativity, and attention, aligning with the product's purpose as a reminder tool. Bright accents reinforce energy and approachability.
Evolution
The core yellow has remained unchanged since the brand's inception, maintaining strong brand equity. Additional accent and neutral tones were introduced for digital and packaging consistency.
Where Post-it uses each color
- Primary
Used for product backgrounds, key brand visuals, and packaging.
- Secondary
Appears in highlights, secondary buttons, and promotional graphics.
- Accent
Used for call-to-action buttons and important UI elements.
- Backgrounds
White and pale yellow are used for page and card backgrounds.
- Text
Charcoal and gray tones are used for primary and secondary text across digital and print.
- Semantic
Green, amber, red, and blue are used for status indicators and alerts in digital interfaces.
Post-it color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Post-it brand color is Canary Yellow, with the hex code #FFFB00.
The RGB value for #FFFB00 is (255, 251, 0). For print, the approximate CMYK is (0, 2, 100, 0).
Post-it uses #E0E0E0 (Light Gray), #757575 (Medium Gray), and #BDBDBD (Muted Gray) for borders and text in digital and print applications.
Use Canary Yellow (#FFFB00) as the dominant brand color, with gold and orange for accents and neutrals for backgrounds and text to ensure legibility.
The secondary color is Post-it Gold, #FFD900, and the accent is Post-it Orange Accent, #FF6F00. Together with the primary they make up the three brand colors at the top of this page.
3 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 Post-it's colors consistently when it generates UI.
Make something in the spirit of Post-it
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.