Codecademy
Codecademy's brand palette, captured directly from the open-source Gamut design system that powers codecademy.com. Gamut publishes the canonical named swatches in a scale-100→900 vocabulary anchored by the deep Navy (#10162F) ink, the Hyper (#3A10E5 / #5533FF) electric brand purple-blue, and a Lime Green family (#AEE938 / #008A27) for completion / success. The identity is developer-focused, dark-canvas-capable, and code-editor adjacent. Codecademy is dark-first on lesson surfaces and light-first on marketing — the brand canonical canvas for editor / IDE chrome is the Navy ink, while the marketing canvas is White / Beige with Navy ink.
30 swatches 15 light roles 15 dark roles
Swatches
navy
#10162F
Codecademy's signature deep navy. Both the body text ink on light surfaces and the canvas in dark mode.
navy-900
#0A0D1C
Deepest navy — pressed Navy / hero anchor.
hyper
#3A10E5
Codecademy's signature electric purple-blue. The primary brand action color on marketing surfaces.
hyper-light
#5533FF
Slightly brighter Hyper — hover and accent moment.
blue
#1557FF
Mid-blue accent (Gamut blue-500) — link and focus state.
blue-light
#3388FF
Brighter blue accent (Gamut blue-400).
blue-300
#66C4FF
Pale info-blue (Gamut blue-300).
blue-pale
#D3F2FF
Pale blue surface tint (Gamut blue-100).
blue-0
#F5FCFF
Faintest blue surface wash (Gamut blue-0).
green
#008A27
Codecademy's success green (Gamut green-700).
green-light
#AEE938
Lime green accent (Gamut green-400) — celebration and completion.
green-pale
#EAFDC6
Pale green surface tint (Gamut green-100).
green-0
#F5FFE3
Faintest green wash (Gamut green-0).
yellow
#FFD300
Warning / streak yellow (Gamut yellow-500).
yellow-dark
#CCA900
Pressed yellow (Gamut yellow-400).
yellow-0
#FFFAE5
Faintest yellow surface wash (Gamut yellow-0).
red
#E91C11
Error / destructive red (Gamut red-500).
red-dark
#BE1809
Pressed error red (Gamut red-600).
red-soft
#DC5879
Soft rose-red (Gamut red-400).
red-0
#FBF1F0
Faintest red surface wash (Gamut red-0).
pink
#F966FF
Editorial pink (Gamut pink-400).
orange
#FF8C00
Editorial orange (Gamut orange-500).
beige
#FFF0E5
Warm beige surface tint (Gamut beige-100) — used in marketing hero washes.
white
#FFFFFF
Pure white — marketing canvas.
gray-100
#F5F5F5
Lightest grey surface (Gamut gray-100).
gray-200
#EEEEEE
Light grey surface (Gamut gray-200).
gray-300
#E0E0E0
Border / divider grey (Gamut gray-300).
gray-600
#9E9E9E
Tertiary text grey (Gamut gray-600).
gray-800
#616161
Secondary text grey (Gamut gray-800).
gray-900
#424242
Deep grey (Gamut gray-900).
Mode role mappings
Light mode (15 roles)
accent
→ hyper-light accent-hover
→ hyper background
→ white border
→ gray-300 error
→ red primary
→ hyper primary-hover
→ hyper-light success
→ green surface
→ gray-100 surface-elevated
→ white text-primary
→ navy text-secondary
→ gray-800 text-tertiary
→ gray-600 warning
→ yellow warning-hover
→ yellow-dark Dark mode (15 roles)
accent
→ green-light accent-hover
→ green background
→ navy border
→ gray-900 error
→ red-soft primary
→ hyper-light primary-hover
→ hyper success
→ green-light surface
→ navy-900 surface-elevated
→ navy text-primary
→ white text-secondary
→ gray-300 text-tertiary
→ gray-600 warning
→ yellow warning-hover
→ yellow-dark Provenance
- Source
- https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/colors.ts
- License
MIT- Attribution
- Codecademy, LLC — palette values captured directly from the Codecademy/gamut open-source repository (packages/gamut-styles/src/variables/colors.ts) on 2026-05-19. Gamut is published under the MIT license, which permits this redistribution of the color tokens. Codecademy and associated marks remain property of Codecademy, LLC (a Skillsoft brand).
- Imported
-
2026-05-19 - Notes
- Codecademy publishes Gamut as an open-source design system (MIT) — the token names and hex values here are upstream-verified. The Navy scale 100-900 in Gamut is defined as alpha tints of the #10162F base; the values captured below are the documented opaque anchor stops (navy-800 / navy-900). The "Hyper" pair (#5533FF / #3A10E5) is the brand's recognizable electric purple-blue, treated as primary on marketing surfaces.