This article lists CSS variables and associated values used for the Fluent utility palette. To see how the DevExpress Design System references these values at a theme level, refer to the Color Roles article.
Gray
| CSS Variable |
Value |
Preview |
--dxds-utility-gray-10 |
#F7F7F7 |
|
--dxds-utility-gray-20 |
#DFDFDF |
|
--dxds-utility-gray-30 |
#C4C4C4 |
|
--dxds-utility-gray-40 |
#888888 |
|
--dxds-utility-gray-50 |
#686868 |
|
--dxds-utility-gray-60 |
#515151 |
|
--dxds-utility-gray-70 |
#393939 |
|
--dxds-utility-gray-80 |
#333333 |
|
--dxds-utility-gray-90 |
#2B2B2B |
|
--dxds-utility-gray-100 |
#202020 |
|
--dxds-utility-gray-110 |
#111111 |
|
--dxds-utility-gray-120 |
#090909 |
|
Blue
| CSS Variable |
Value |
Preview |
--dxds-utility-blue-10 |
#F3F9FD |
|
--dxds-utility-blue-20 |
#D0E7F8 |
|
--dxds-utility-blue-30 |
#A9D3F2 |
|
--dxds-utility-blue-40 |
#5CAAE5 |
|
--dxds-utility-blue-50 |
#3595DE |
|
--dxds-utility-blue-60 |
#1A86D9 |
|
--dxds-utility-blue-70 |
#0078D4 |
|
--dxds-utility-blue-80 |
#006CBF |
|
--dxds-utility-blue-90 |
#005BA1 |
|
--dxds-utility-blue-100 |
#004377 |
|
--dxds-utility-blue-110 |
#002440 |
|
--dxds-utility-blue-120 |
#001322 |
|
Cyan
| CSS Variable |
Value |
Preview |
--dxds-utility-cyan-10 |
#F2FAFC |
|
--dxds-utility-cyan-20 |
#CDEDF4 |
|
--dxds-utility-cyan-30 |
#A4DEEB |
|
--dxds-utility-cyan-40 |
#56BFD7 |
|
--dxds-utility-cyan-50 |
#31AFCC |
|
--dxds-utility-cyan-60 |
#18A4C4 |
|
--dxds-utility-cyan-70 |
#0099BC |
|
--dxds-utility-cyan-80 |
#008AA9 |
|
--dxds-utility-cyan-90 |
#00748F |
|
--dxds-utility-cyan-100 |
#005669 |
|
--dxds-utility-cyan-110 |
#002E38 |
|
--dxds-utility-cyan-120 |
#00181E |
|
Teal
| CSS Variable |
Value |
Preview |
--dxds-utility-teal-10 |
#EFF9F9 |
|
--dxds-utility-teal-20 |
#C2E7E7 |
|
--dxds-utility-teal-30 |
#92D1D1 |
|
--dxds-utility-teal-40 |
#41A3A3 |
|
--dxds-utility-teal-50 |
#218B8B |
|
--dxds-utility-teal-60 |
#0E7878 |
|
--dxds-utility-teal-70 |
#006666 |
|
--dxds-utility-teal-80 |
#005C5C |
|
--dxds-utility-teal-90 |
#004E4E |
|
--dxds-utility-teal-100 |
#003939 |
|
--dxds-utility-teal-110 |
#001F1F |
|
--dxds-utility-teal-120 |
#001010 |
|
Green
| CSS Variable |
Value |
Preview |
--dxds-utility-green-10 |
#F1FAF1 |
|
--dxds-utility-green-20 |
#C9EAC9 |
|
--dxds-utility-green-30 |
#9FD89F |
|
--dxds-utility-green-40 |
#54B054 |
|
--dxds-utility-green-50 |
#359B35 |
|
--dxds-utility-green-60 |
#218C21 |
|
--dxds-utility-green-70 |
#107C10 |
|
--dxds-utility-green-80 |
#0E700E |
|
--dxds-utility-green-90 |
#0C5E0C |
|
--dxds-utility-green-100 |
#094509 |
|
--dxds-utility-green-110 |
#052505 |
|
--dxds-utility-green-120 |
#031403 |
|
Yellow
| CSS Variable |
Value |
Preview |
--dxds-utility-yellow-10 |
#FEFBF4 |
|
--dxds-utility-yellow-20 |
#FCEFD3 |
|
--dxds-utility-yellow-30 |
#F9E2AE |
|
--dxds-utility-yellow-40 |
#F2C661 |
|
--dxds-utility-yellow-50 |
#EFB839 |
|
--dxds-utility-yellow-60 |
#EDAD1C |
|
--dxds-utility-yellow-70 |
#EAA300 |
|
--dxds-utility-yellow-80 |
#D39300 |
|
--dxds-utility-yellow-90 |
#B27C00 |
|
--dxds-utility-yellow-100 |
#835B00 |
|
--dxds-utility-yellow-110 |
#463100 |
|
--dxds-utility-yellow-120 |
#251A00 |
|
Orange
| CSS Variable |
Value |
Preview |
--dxds-utility-orange-10 |
#FFF9F5 |
|
--dxds-utility-orange-20 |
#FEE5D7 |
|
--dxds-utility-orange-30 |
#FDCFB4 |
|
--dxds-utility-orange-40 |
#FAA06B |
|
--dxds-utility-orange-50 |
#F98845 |
|
--dxds-utility-orange-60 |
#F87528 |
|
--dxds-utility-orange-70 |
#F7630C |
|
--dxds-utility-orange-80 |
#DE590B |
|
--dxds-utility-orange-90 |
#BC4B09 |
|
--dxds-utility-orange-100 |
#8A3707 |
|
--dxds-utility-orange-110 |
#4A1E04 |
|
--dxds-utility-orange-120 |
#271002 |
|
Red
| CSS Variable |
Value |
Preview |
--dxds-utility-red-10 |
#FDF6F6 |
|
--dxds-utility-red-20 |
#F8DADB |
|
--dxds-utility-red-30 |
#F1BBBC |
|
--dxds-utility-red-40 |
#E37D80 |
|
--dxds-utility-red-50 |
#DC5E62 |
|
--dxds-utility-red-60 |
#D7494C |
|
--dxds-utility-red-70 |
#D13438 |
|
--dxds-utility-red-80 |
#BC2F32 |
|
--dxds-utility-red-90 |
#9F282B |
|
--dxds-utility-red-100 |
#751D1F |
|
--dxds-utility-red-110 |
#3F1011 |
|
--dxds-utility-red-120 |
#210809 |
|
Pink
| CSS Variable |
Value |
Preview |
--dxds-utility-pink-10 |
#FEF6FB |
|
--dxds-utility-pink-20 |
#FBDDF0 |
|
--dxds-utility-pink-30 |
#F7C0E3 |
|
--dxds-utility-pink-40 |
#EF85C8 |
|
--dxds-utility-pink-50 |
#EA66BA |
|
--dxds-utility-pink-60 |
#E750B0 |
|
--dxds-utility-pink-70 |
#E43BA6 |
|
--dxds-utility-pink-80 |
#CD3595 |
|
--dxds-utility-pink-90 |
#AD2D7E |
|
--dxds-utility-pink-100 |
#80215D |
|
--dxds-utility-pink-110 |
#441232 |
|
--dxds-utility-pink-120 |
#24091B |
|
Purple
| CSS Variable |
Value |
Preview |
--dxds-utility-purple-10 |
#F7F4FB |
|
--dxds-utility-purple-20 |
#E0D3ED |
|
--dxds-utility-purple-30 |
#C6B1DE |
|
--dxds-utility-purple-40 |
#9470BD |
|
--dxds-utility-purple-50 |
#7C52AB |
|
--dxds-utility-purple-60 |
#6B3F9E |
|
--dxds-utility-purple-70 |
#5C2E91 |
|
--dxds-utility-purple-80 |
#532982 |
|
--dxds-utility-purple-90 |
#46236E |
|
--dxds-utility-purple-100 |
#341A51 |
|
--dxds-utility-purple-110 |
#1C0E2B |
|
--dxds-utility-purple-120 |
#0F0717 |
|
Indigo
| CSS Variable |
Value |
Preview |
--dxds-utility-indigo-10 |
#F7F9FE |
|
--dxds-utility-indigo-20 |
#E1E6FC |
|
--dxds-utility-indigo-30 |
#C8D1FA |
|
--dxds-utility-indigo-40 |
#93A4F4 |
|
--dxds-utility-indigo-50 |
#778DF1 |
|
--dxds-utility-indigo-60 |
#637CEF |
|
--dxds-utility-indigo-70 |
#4F6BED |
|
--dxds-utility-indigo-80 |
#4760D5 |
|
--dxds-utility-indigo-90 |
#3C51B4 |
|
--dxds-utility-indigo-100 |
#2C3C85 |
|
--dxds-utility-indigo-110 |
#182047 |
|
--dxds-utility-indigo-120 |
#0D1126 |
|