React

React brand palette captured from the open-source react.dev color module. The brand is dark-first: a near-black canvas (#23272F) is the default surface and React Cyan (#61DAFB) is the historical atom-orbit logo color, which the modern site supplements with a documentation blue ramp (link #149ECA, dark-mode link #58C4DC). Includes the full Gray, Blue, Yellow, Purple, Green, and Red ramps used in the docs.

20 swatches 14 light roles 14 dark roles reactlibraryjavascriptmetacyandark-firstopen-source

Swatches

react-cyan
#61DAFB
Canonical React logo color — the cyan of the atom-orbit mark used since the original Facebook open-source release.
react-blue-50
#087EA4
link / brand color on light surfaces.
react-blue-40
#149ECA
docs link color on light surfaces.
react-blue-30
#58C4DC
link / brand color on dark surfaces.
react-blue-80
#043849
deep blue used for hover states on light surfaces.
react-blue-10
#E6F7FF
highlight tint on light surfaces.
gray-95
#16181D
deepest dark-mode background.
gray-90
#23272F
primary dark canvas (wash-dark / primary).
gray-80
#343A46
dark-mode borders and card surfaces.
gray-70
#404756
secondary text on dark surfaces.
gray-60
#4E5769
tertiary text.
gray-50
#5E687E
muted text.
gray-30
#99A1B3
tertiary text on dark.
gray-10
#EBECF0
light-mode borders and dividers.
gray-5
#F6F7F9
light-mode card surfaces.
react-white
#FFFFFF
light-mode page canvas (wash).
yellow-50
#C76A15
docs warning amber.
red-50
#A6423A
docs danger red.
green-50
#388F7F
docs success teal-green.
purple-50
#575FB7
docs accent purple.

Mode role mappings

Light mode (14 roles)

accent → react-cyan
accent-hover → react-blue-40
background → react-white
error → red-50
primary → react-blue-50
primary-hover → react-blue-80
success → green-50
surface → gray-5
surface-elevated → react-white
text-primary → gray-90
text-secondary → gray-70
text-tertiary → gray-50
warning → yellow-50
warning-hover → yellow-50

Dark mode (14 roles)

accent → react-cyan
accent-hover → react-blue-30
background → gray-90
error → red-50
primary → react-blue-30
primary-hover → react-blue-40
success → green-50
surface → gray-80
surface-elevated → gray-70
text-primary → react-white
text-secondary → gray-30
text-tertiary → gray-50
warning → yellow-50
warning-hover → yellow-50

Provenance

Source
https://github.com/reactjs/react.dev/blob/main/colors.js
License
MIT
Attribution
The react.dev codebase is MIT-licensed; React itself is MIT-licensed. The React logo (atom orbiting an electron) is a trademark of Meta Platforms, Inc. Colors documented here are captured verbatim from the upstream colors.js module on the main branch of github.com/reactjs/react.dev. React Cyan (#61DAFB) is the canonical logo color, verified against the simple-icons project.
Imported
2026-05-18
Notes
react.dev's runtime brand uses #087EA4 (light) / #58C4DC (dark) for documentation accent links; #61DAFB remains the canonical logo color and is mapped here as the brand identity color. The site is dark-first; the dark mode below is the production rendering, light mode is the documented light theme.