Sketch

Sketch's brand palette, anchored on Sketch Yellow (#FDB300) — the signature warm yellow-orange that has carried the diamond mark since the platform's early days. The institutional voice pairs that yellow with a clean white canvas and near-black body text on marketing surfaces. Where competing design tools commit to blues and purples, Sketch holds to a distinctive warm yellow.

9 swatches 14 light roles 14 dark roles saasdesign-toolssketchyellow

Swatches

sketch-yellow
#FDB300
Signature warm yellow-orange. Primary brand color — used on the diamond mark, the wordmark accent, and key brand surfaces.
sketch-white
#FFFFFF
Canvas on light surfaces; reversed wordmark fill.
sketch-black
#000000
Wordmark on light backgrounds; near-black body text.
sketch-canvas-dark
#1C1C1E
Authored dark-mode canvas — macOS-aligned neutral near-black.
sketch-surface-light
#F5F5F7
Authored panel surface for light mode.
sketch-surface-dark
#2C2C2E
Authored elevated surface on dark mode.
sketch-text-secondary
#6E6E73
Authored secondary text — neutral mid-gray on light canvas.
sketch-text-tertiary
#A1A1A6
Authored tertiary / muted text.
sketch-yellow-hover
#FFC633
Authored softer Sketch Yellow for hover / active states.

Mode role mappings

Light mode (14 roles)

accent → sketch-yellow
accent-hover → sketch-yellow-hover
background → sketch-white
error → sketch-yellow
primary → sketch-yellow
primary-hover → sketch-yellow-hover
success → sketch-yellow
surface → sketch-surface-light
surface-elevated → sketch-white
text-primary → sketch-black
text-secondary → sketch-text-secondary
text-tertiary → sketch-text-tertiary
warning → sketch-yellow
warning-hover → sketch-yellow-hover

Dark mode (14 roles)

accent → sketch-yellow
accent-hover → sketch-yellow-hover
background → sketch-canvas-dark
error → sketch-yellow
primary → sketch-yellow
primary-hover → sketch-yellow-hover
success → sketch-yellow
surface → sketch-surface-dark
surface-elevated → sketch-surface-dark
text-primary → sketch-white
text-secondary → sketch-text-tertiary
text-tertiary → sketch-text-secondary
warning → sketch-yellow
warning-hover → sketch-yellow-hover

Provenance

Source
https://www.sketch.com/press
License
Proprietary — All Rights Reserved
Attribution
Sketch and the Sketch logo are trademarks of Sketch B.V. The primary brand color Sketch Yellow (#FDB300) is documented on Sketch's press resources and is independently cross-referenced by the simple-icons brand database, which cites sketch.com as the source.
Imported
2026-05-18
Notes
Only Sketch Yellow (#FDB300) is read directly from Sketch's public brand surfaces. Secondary neutrals (mid-grays, dark canvas, hover yellow) are authored neutral inversions calibrated to support both modes consistently without fabricating hex values that Sketch does not publish.