designsystem-405639-colors-utility-palettes-fluent-utility-palette.md
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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |