Sketch color palette
SaaSSketch uses a distinctive yellow as its primary brand color, complemented by a clean, minimal UI with neutral grays and dark tones. The palette is designed for clarity and creative focus in its digital design tools.
sketch.comSketch colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sketch YellowPrimary247, 181, 0
- Sketch CharcoalSecondary38, 38, 38
- Sketch OrangeAccent255, 174, 0
Surfaces
Page, cards and dividers.- Sketch WhiteBackground255, 255, 255
- Sketch Light GraySurface245, 245, 247
- Sketch Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Sketch CharcoalText38, 38, 38
- Sketch Medium GraySecondary text110, 110, 110
- Sketch Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Sketch GreenSuccess52, 199, 89
- Sketch Warning OrangeWarning255, 149, 0
- Sketch RedError255, 59, 48
- Sketch BlueInfo0, 122, 255
Use Sketch's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sketch-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007AFF;
--error: #FF3B30;
--accent: #FFAE00;
--border: #E0E0E0;
--primary: #F7B500;
--success: #34C759;
--surface: #F5F5F7;
--warning: #FF9500;
--secondary: #262626;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #262626;
--text-secondary: #6E6E6E;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
13.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Sketch gray and neutral colors
The quiet part of the Sketch palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sketch WhiteBackground
- HEX
- RGB
- HSL
- Sketch Light GraySurface
- HEX
- RGB
- HSL
- Sketch Border GrayBorder
- HEX
- RGB
- HSL
- Sketch CharcoalText
- HEX
- RGB
- HSL
- Sketch Medium GraySecondary text
- HEX
- RGB
- HSL
- Sketch Muted GrayMuted text
- HEX
- RGB
- HSL
About Sketch's colors
Sketch's color system centers on a vibrant yellow for brand recognition, supported by neutral grays for UI clarity. The palette is functional, focusing on usability and creative workspace.
Primary yellow is paired with deep charcoal for contrast.
Accent orange and blue are used for highlights and status.
Neutrals dominate the UI for minimal distraction.
Psychology
The yellow conveys creativity, optimism, and approachability, while the grays provide a professional, focused environment. Accent colors guide user attention without overwhelming the interface.
Evolution
Sketch's palette has remained stable, with yellow as the core identity since its launch. Minor adjustments to gray tones have improved accessibility and modernized the UI.
Where Sketch uses each color
- Primary
Sketch Yellow is used for the logo, primary buttons, and key highlights.
- Secondary
Sketch Charcoal appears in navigation bars, text, and UI chrome.
- Accent
Sketch Orange is used for secondary actions and highlights.
- Backgrounds
Sketch White and Light Gray are used for app backgrounds and panels.
- Text
Charcoal and Medium Gray are used for primary and secondary text throughout the app.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states respectively.
Sketch color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Sketch primary color hex code is #F7B500. This yellow is central to the brand's identity.
Sketch Yellow (#F7B500) in RGB is 247, 181, 0. In CMYK, it is approximately 0, 27, 100, 3.
Sketch uses #262626 (Charcoal), #6E6E6E (Medium Gray), #B3B3B3 (Muted Gray), #F5F5F7 (Light Gray), and #E0E0E0 (Border Gray) throughout its UI for backgrounds, text, and borders.
Use Sketch Yellow (#F7B500) for brand elements and primary actions, with neutral grays for backgrounds and text. Accent and semantic colors should highlight status or interactive elements without overpowering the interface.
The secondary color is Sketch Charcoal, #262626, and the accent is Sketch Orange, #FFAE00. Together with the primary they make up the three brand colors at the top of this page.
4 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 Sketch's colors consistently when it generates UI.
Make something in the spirit of Sketch
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.