Khan Academy
Khan Academy's brand palette, captured directly from the open-source Wonder Blocks design system that powers khanacademy.org. Wonder Blocks publishes the canonical named base swatches — Blue (#1865F2 primary), Green (#00A60E), Gold (#FFB100), Red (#D92916), Purple (#9059FF) — alongside the brand neutrals Off Black (#21242C), Off White (#F7F8FA), and the Khanmigo Eggplant (#5F1E5C) accent reserved for the AI tutoring product line. The brand identity is friendly, classroom-bright, and reader-first. Khan Academy is light-first; the canvas is Off White / White with Off Black ink, and Khan Academy Blue is the primary action color.
16 swatches 15 light roles 15 dark roles
Swatches
blue
#1865F2
Khan Academy's primary brand blue (Wonder Blocks blue). The signature action color.
green
#00A60E
Mastery / completion green — the "correct answer" signal.
gold
#FFB100
Achievement / streak gold — the motivational accent.
red
#D92916
Error / destructive red — the "wrong answer" signal.
purple
#9059FF
Editorial purple — secondary accent in illustrations and badges.
off-black
#21242C
Canonical text ink — Wonder Blocks deliberately avoids pure
off-white
#F7F8FA
Default surface canvas — Wonder Blocks light-mode background.
white
#FFFFFF
Pure white — elevated surface and card background.
dark-blue
#0B2149
Wonder Blocks brand-tier deep navy — hero callouts and chart anchor.
teal
#14BF96
Wonder Blocks brand-tier teal — secondary accent and editorial highlight.
eggplant
#5F1E5C
The Khanmigo AI tutor brand accent. Reserved for the AI product surface.
blue-hover
#11459E
Pressed / active variant of Khan Academy Blue — derived for hover/active states.
blue-pale
#E5EEFE
Pale blue surface tint — Wonder Blocks faded-blue background.
red-pale
#FBE7E5
Pale red surface tint — Wonder Blocks faded-red background.
green-pale
#E0F4E1
Pale green surface tint — Wonder Blocks faded-green background.
gold-pale
#FFF6E0
Pale gold surface tint — Wonder Blocks faded-gold background.
Mode role mappings
Light mode (15 roles)
accent
→ blue accent-hover
→ blue-hover background
→ white border
→ off-white error
→ red primary
→ blue primary-hover
→ blue-hover success
→ green surface
→ off-white surface-elevated
→ white text-primary
→ off-black text-secondary
→ off-black text-tertiary
→ off-black warning
→ gold warning-hover
→ gold Dark mode (15 roles)
accent
→ teal accent-hover
→ green background
→ off-black border
→ dark-blue error
→ red primary
→ blue primary-hover
→ blue-pale success
→ green surface
→ dark-blue surface-elevated
→ off-black text-primary
→ white text-secondary
→ off-white text-tertiary
→ off-white warning
→ gold warning-hover
→ gold-pale Provenance
- Source
- https://github.com/Khan/wonder-blocks/blob/main/packages/wonder-blocks-tokens/src/tokens/color.ts
- License
MIT- Attribution
- Khan Academy, Inc. — palette values captured directly from the Khan/wonder-blocks open-source repository (packages/wonder-blocks-tokens/src/tokens/color.ts) on 2026-05-19. Wonder Blocks is published under the MIT license, which permits this redistribution of the color tokens. Khan Academy, Khanmigo, and associated marks remain property of Khan Academy, Inc.
- Imported
-
2026-05-19 - Notes
- Khan Academy publishes Wonder Blocks as an open-source design system under MIT — the token names and hex values captured here are the exact values from the upstream source. The Khanmigo Eggplant (#5F1E5C) is a brand-tier accent reserved for the AI tutor product surface and must not be used as a general-purpose accent.