Software & SaaS
Sketch Color Codes
Sketch's colors are five golds: #FDB300, #FDAD00, #FDD231, #FEEEB7 and #EA6C00. The Sketch color codes in Hex, RGB and CMYK can be found below. Pieter Omvlee released it through his company Bohemian Coding in September 2010, and for years it was the reason designers bought Macs.
Primary colors
What are Sketch Primary Colors?
Sketch's primary color is gold #FDB300, with four more tones shading the facets of the diamond.
Sketch publishes no public CMYK or Pantone sheet, so both are shown below as conversions and nearest matches.
Sketch Gold
| Hex | #FDB300 |
|---|---|
| RGB | 253, 179, 0 |
| HSL | hsl(42, 100%, 50%) |
| CMYK | 0%, 29%, 100%, 1%converted · approximate |
| Pantone | PMS 1235 Cnearest match · not published by the brand |
Sketch Amber
| Hex | #FDAD00 |
|---|---|
| RGB | 253, 173, 0 |
| HSL | hsl(41, 100%, 50%) |
| CMYK | 0%, 32%, 100%, 1%converted · approximate |
| Pantone | PMS 1235 Cnearest match · not published by the brand |
Sketch Light Gold
| Hex | #FDD231 |
|---|---|
| RGB | 253, 210, 49 |
| HSL | hsl(47, 98%, 59%) |
| CMYK | 0%, 17%, 81%, 1%converted · approximate |
| Pantone | PMS 810 Cnearest match · not published by the brand |
Sketch Cream
| Hex | #FEEEB7 |
|---|---|
| RGB | 254, 238, 183 |
| HSL | hsl(46, 97%, 86%) |
| CMYK | 0%, 6%, 28%, 0%converted · approximate |
| Pantone | PMS 1205 Cnearest match · not published by the brand |
Sketch Burnt Orange
| Hex | #EA6C00 |
|---|---|
| RGB | 234, 108, 0 |
| HSL | hsl(28, 100%, 46%) |
| CMYK | 0%, 54%, 100%, 8%converted · approximate |
| Pantone | PMS 158 Cnearest match · not published by the brand |
Sketch Hex Color Codes
Sketch hex color codes are #FDB300 for gold, #FDAD00 for amber, #FDD231 for light gold, #FEEEB7 for cream and #EA6C00 for burnt orange.
| Color | Hex |
|---|---|
| Gold | #FDB300 |
| Amber | #FDAD00 |
| Light Gold | #FDD231 |
| Cream | #FEEEB7 |
| Burnt Orange | #EA6C00 |
Sketch RGB Color Codes
Sketch RGB color codes are 253, 179, 0 for gold, 253, 173, 0 for amber, 253, 210, 49 for light gold, 254, 238, 183 for cream and 234, 108, 0 for burnt orange. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Gold | rgb(253, 179, 0) |
| Amber | rgb(253, 173, 0) |
| Light Gold | rgb(253, 210, 49) |
| Cream | rgb(254, 238, 183) |
| Burnt Orange | rgb(234, 108, 0) |
Sketch HSL Color Codes
Sketch HSL color codes are 42, 100%, 50% for gold, 41, 100%, 50% for amber, 47, 98%, 59% for light gold, 46, 97%, 86% for cream and 28, 100%, 46% for burnt orange. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Gold | hsl(42, 100%, 50%) |
| Amber | hsl(41, 100%, 50%) |
| Light Gold | hsl(47, 98%, 59%) |
| Cream | hsl(46, 97%, 86%) |
| Burnt Orange | hsl(28, 100%, 46%) |
Sketch CMYK Color Code
Sketch CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Gold | 0%, 29%, 100%, 1% |
| Amber | 0%, 32%, 100%, 1% |
| Light Gold | 0%, 17%, 81%, 1% |
| Cream | 0%, 6%, 28%, 0% |
| Burnt Orange | 0%, 54%, 100%, 8% |
Sketch Pantone Color Codes
Sketch Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Gold | PMS 1235 C |
| Amber | PMS 1235 C |
| Light Gold | PMS 810 C |
| Cream | PMS 1205 C |
| Burnt Orange | PMS 158 C |
Logo
Sketch Logo Colors
Sketch logo colors are five tones of gold, one per facet of the gem.
Sketch Logo Colors Palette
What the Sketch Logo Colors Mean?
The Sketch logo colors build a gem out of flat planes. The mark is a cut diamond seen head on, and each facet takes a slightly different gold so the shape reads as faceted without a single gradient in the file, which is exactly the trick a vector designer would use. Five values of one hue is unusual: most logos on this site use one or two. It also means a single hex cannot describe the mark, and #F7B500 circulates widely as Sketch's color while appearing nowhere in the artwork.
Sketch Logo JPG
Sketch logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Sketch Logo PNG
Sketch logo in PNG, with a transparent background. Use it over a colored surface.
Sketch Logo WebP
Sketch logo in WebP. Same transparency as the PNG at about a third of the file size.
Sketch Color Code Shades
Sketch color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Sketch paint or trim names.
In code
Using the Sketch palette
CSS custom properties
:root {
--sketch-gold: #FDB300;
--sketch-amber: #FDAD00;
--sketch-light-gold: #FDD231;
--sketch-cream: #FEEEB7;
--sketch-burnt-orange: #EA6C00;
}Contrast against white
| Gold | 1.81:1AA × |
|---|---|
| Amber | 1.88:1AA × |
| Light Gold | 1.45:1AA × |
| Cream | 1.16:1AA × |
| Burnt Orange | 3.16:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.