esc
Docs
Palette
Icons
Blog
FAQ
Home
Docs
Palette
Icons
Blog
FAQ
0
Home
Palette
Icons
Docs
Blog
FAQ
GitHub
Docs
Blog
FAQ
GitHub
Base
Primary
Accent
Generate
dark
base
#222536
primary
#0184fe
accent
#f96901
(derived)
Use on this page
Download CSS
Download Tailwind theme
Pier
inset app bar
Leads
Body text sits on the surface.
Muted text carries detail.
primary-600 link
601 on hover
Search leads (placeholder)
Rest
Hover · ink/5
Pressed · ink/10
Selected · accent wash
Disabled · neutral-400
Keyboard focus · accent-500 ring
Nested panel on raised
Overlays and menus use raised too.
primary
interface fill
secondary
✕ Delete
Ghost
i info
✓ success
! warning
✕ error
Roles and control states in use
base
#222536
inset
#1b1d2c
surface
#2d3145
raised
#353a51
line
#353a51
muted
#acb5e1
fg
#e1e7ff
strong
#f3f6ff
ink
#ffffff
primary
#0184fe
secondary
#809ec4
accent
#f96901
Roles and fills
50
100
200
300
400
500
600
700
800
900
950
neutral
primary
primary β
secondary
secondary β
accent
accent β
red · error
orange
yellow · warning
lime
green · success
cyan
sky · info
blue
purple
pink
Every scale by step; select a swatch, then use the arrow keys
. Scroll sideways for the rest of the steps.
+a
+b
#222536 base
#1b1d2c inset
#2d3145 surface, neutral-100
#353a51 raised, line, neutral-200
#acb5e1 muted, neutral-600
#e1e7ff fg, neutral-800
#f3f6ff strong, neutral-900, primary-901
#ffffff ink, neutral-950
#272b3d neutral-50
#52587b neutral-300
#737aa4 neutral-400
#9099c3 neutral-500
#c5cefc neutral-700
#0184fe primary
#202d3c primary-50
#21334a primary-100
#233c5c primary-200
#2c5c96 primary-300
#2b7ddc primary-400
#4c9dff primary-500
#85bbff primary-600
#b5d4fa primary-700
#dde9fa primary-800
#f0f7ff primary-900
#1f2a4e primary-51
#212e63 primary-101
#243480 primary-201
#3344ce primary-301
#5370ec primary-401
#7493ff primary-501
#9bb4ff primary-601
#c1d0fa primary-701
#e1e8fa primary-801
#282c33 secondary-50
#2c333b secondary-100
#323c48 secondary-200
#4b5c73 secondary-300
#637fa5 secondary-400
#809ec4 secondary-500
#a5b9d5 secondary-600
#c7d2e2 secondary-700
#e3e9ef secondary-800
#f4f6fa secondary-900, secondary-901
#272c3a secondary-51
#2b3246 secondary-101
#313a57 secondary-201
#48588a secondary-301
#6c7bab secondary-401
#8b9ac4 secondary-501
#acb7d5 secondary-601
#cad1e2 secondary-701
#e5e8ef secondary-801
#392820 accent-50
#452d21 accent-100
#553323 accent-200
#85482b accent-300
#c05d29 accent-400
#f96901 accent-500
#ff996b accent-600
#fbc3aa accent-700
#fae2d8 accent-800
#fff4ef accent-900
#352a20 accent-51
#3f2f21 accent-101
#4e3623 accent-201
#7a502b accent-301
#af6b2a accent-401
#e17f01 accent-501
#ff9c3e accent-601
#fbc599 accent-701
#fae3d1 accent-801
#fff4ec accent-901
#3d2625 red-50
#4a2929 red-100
#5c2e2e red-200
#8f3d40 red-300
#d04751 red-400
#f2686f red-500
#f59b9a red-600
#f5c3c1 red-700
#f8e2e1 red-800
#fef4f3 red-900
#362922 orange-50
#412e24 orange-100
#4f3527 orange-200
#7c4e33 orange-300
#b2683b orange-400
#e67a35 orange-500
#f5a06e orange-600
#f5c6ac orange-700
#f8e3d7 orange-800
#fef4f0 orange-900
#302c22 yellow-50
#383224 yellow-100
#433a26 yellow-200
#6a5934 yellow-300
#95793b yellow-400
#bd9536 yellow-500
#dfb041 yellow-600
#f4cb73 yellow-700
#f8e6c1 yellow-800
#fef5e5 yellow-900
#2a2d24 lime-50
#2f3426 lime-100
#363e2a lime-200
#53613c lime-300
#71874a lime-400
#8aa950 lime-500
#a3c75f lime-600
#bde17a lime-700
#d6f69d lime-800
#edfcd5 lime-900
#232f25 green-50
#253628 green-100
#28412d green-200
#386743 green-300
#429157 green-400
#3db763 green-500
#49d775 green-600
#69f28f green-700
#c1f8cb green-800
#e2fee6 green-900
#232e2d cyan-50
#253534 cyan-100
#28403e cyan-200
#366561 cyan-300
#3d8c87 cyan-400
#31b1aa cyan-500
#3cd0c8 cyan-600
#5feae3 cyan-700
#abf9f3 cyan-800
#d9fefb cyan-900
#232e33 sky-50
#25353c sky-100
#283e48 sky-200
#386174 sky-300
#4187a6 sky-400
#3ca8d6 sky-500
#5ac5f5 sky-600
#a4daf4 sky-700
#d5ecf8 sky-800
#ecf8fe sky-900
#1e2b49 blue-50
#1f315b blue-100
#203873 blue-200
#2a51b8 blue-300
#5078d6 blue-400
#7399ec blue-500
#9bb7f1 blue-600
#c2d1f2 blue-700
#e1e8f7 blue-800
#f3f6fd blue-900
#2f293c purple-50
#372d4a purple-100
#42345b purple-200
#654a91 purple-300
#8b66c7 purple-400
#a888dd purple-500
#c0abe7 purple-600
#d5cbec purple-700
#eae5f4 purple-800
#f7f5fc purple-900
#382730 pink-50
#432b38 pink-100
#513144 pink-200
#7e4566 pink-300
#b55890 pink-400
#e16bb3 pink-500
#e89cc7 pink-600
#edc3d9 pink-700
#f4e2eb pink-800
#fcf4f8 pink-900
C 0.1
C 0.2
C 0.3
Hue and chroma (the a–b plane)
OKLab, a and b doubled · drag or use the arrow keys to rotate