Tailwind
Bootstrap
Material
Ant Design
Chakra
Open Color
Bulma
Radix
Open Props
DaisyUI
Flutter
CSS Colors
ANSI 256Open Props Color Palette
The complete Open Props color palette. Click any color to see it in HEX, RGB, HSL, Flutter, SwiftUI, Tailwind CSS, Terminal ANSI, and 30+ formats.
--gray-0
#f8f9fa
--gray-1
#f1f3f5
--gray-2
#e9ecef
--gray-3
#dee2e6
--gray-4
#ced4da
--gray-5
#adb5bd
--gray-6
#868e96
--gray-7
#495057
--gray-8
#343a40
--gray-9
#212529
--gray-10
#16191d
--gray-11
#0d0f12
--gray-12
#030507
--red-0
#fff5f5
--red-1
#ffe3e3
--red-2
#ffc9c9
--red-3
#ffa8a8
--red-4
#ff8787
--red-5
#ff6b6b
--red-6
#fa5252
--red-7
#f03e3e
--red-8
#e03131
--red-9
#c92a2a
--red-10
#b02525
--red-11
#962020
--red-12
#7d1a1a
--blue-0
#e7f5ff
--blue-1
#d0ebff
--blue-2
#a5d8ff
--blue-3
#74c0fc
--blue-4
#4dabf7
--blue-5
#339af0
--blue-6
#228be6
--blue-7
#1c7ed6
--blue-8
#1971c2
--blue-9
#1864ab
--blue-10
#145591
--blue-11
#114678
--blue-12
#0d375e
--green-0
#ebfbee
--green-1
#d3f9d8
--green-2
#b2f2bb
--green-3
#8ce99a
--green-4
#69db7c
--green-5
#51cf66
--green-6
#40c057
--green-7
#37b24d
--green-8
#2f9e44
--green-9
#2b8a3e
--green-10
#237032
--green-11
#1b5727
--green-12
#133d1b
--orange-0
#fff4e6
--orange-1
#ffe8cc
--orange-2
#ffd8a8
--orange-3
#ffc078
--orange-4
#ffa94d
--orange-5
#ff922b
--orange-6
#fd7e14
--orange-7
#f76707
--orange-8
#e8590c
--orange-9
#d9480f
--orange-10
#bf400d
--orange-11
#a5380b
--orange-12
#8c3009
--violet-0
#f3f0ff
--violet-1
#e5dbff
--violet-2
#d0bfff
--violet-3
#b197fc
--violet-4
#9775fa
--violet-5
#845ef7
--violet-6
#7950f2
--violet-7
#7048e8
--violet-8
#6741d9
--violet-9
#5f3dc4
--violet-10
#5235ab
--violet-11
#462d91
--violet-12
#3a2578
--yellow-0
#fff9db
--yellow-1
#fff3bf
--yellow-2
#ffec99
--yellow-3
#ffe066
--yellow-4
#ffd43b
--yellow-5
#fcc419
--yellow-6
#fab005
--yellow-7
#f59f00
--yellow-8
#f08c00
--yellow-9
#e67700
--yellow-10
#cc6900
--yellow-11
#b35c00
--yellow-12
#994f00
--pink-0
#fff0f6
--pink-1
#ffdeeb
--pink-2
#fcc2d7
--pink-3
#faa2c1
--pink-4
#f783ac
--pink-5
#f06595
--pink-6
#e64980
--pink-7
#d6336c
--pink-8
#c2255c
--pink-9
#a61e4d
--pink-10
#8c1941
--pink-11
#731536
--pink-12
#59102a
--cyan-0
#e3fafc
--cyan-1
#c5f6fa
--cyan-2
#99e9f2
--cyan-3
#66d9e8
--cyan-4
#3bc9db
--cyan-5
#22b8cf
--cyan-6
#15aabf
--cyan-7
#1098ad
--cyan-8
#0c8599
--cyan-9
#0b7285
--cyan-10
#095c6b
--cyan-11
#074652
--cyan-12
#053038
--teal-0
#e6fcf5
--teal-1
#c3fae8
--teal-2
#96f2d7
--teal-3
#63e6be
--teal-4
#38d9a9
--teal-5
#20c997
--teal-6
#12b886
--teal-7
#0ca678
--teal-8
#099268
--teal-9
#087f5b
--teal-10
#066649
--teal-11
#054d37
--teal-12
#033425