This section lists the available global color styling hooks.
System ColorsSystem Colors
System-level styling hooks provide a way to manage the visual appearance of elements across an entire application.
The system color styling hooks in this list are compatible with Lightning UI, but they’re incompatible with Enhanced Lightning UI.
--slds-g-color-border-base-2--slds-g-color-border-base-3--slds-g-color-border-base-4--slds-g-color-border-brand-1--slds-g-color-border-brand-2--slds-g-color-neutral-10-opacity-10--slds-g-color-neutral-10-opacity-25--slds-g-color-neutral-10-opacity-50--slds-g-color-neutral-100-opacity-25--slds-g-color-neutral-100-opacity-75--slds-g-link-color--slds-g-link-color-active--slds-g-link-color-focus--slds-g-link-color-hover--slds-g-link-text-color-hover
All other system color styling hooks in this table are compatible with Lightning UI and Enhanced Lightning UI.
| Styling Hook | Example |
|---|---|
| --slds-g-color-neutral-base-100 | #FFFFFF PALETTE_NEUTRAL_100 |
| --slds-g-color-neutral-base-95 | #F3F3F3 PALETTE_NEUTRAL_95 |
| --slds-g-color-neutral-base-90 | #E5E5E5 PALETTE_NEUTRAL_90 |
| --slds-g-color-neutral-base-80 | #C9C9C9 PALETTE_NEUTRAL_80 |
| --slds-g-color-neutral-base-70 | #AEAEAE PALETTE_NEUTRAL_70 |
| --slds-g-color-neutral-base-65 | #A0A0A0 PALETTE_NEUTRAL_65 |
| --slds-g-color-neutral-base-60 | #939393 PALETTE_NEUTRAL_60 |
| --slds-g-color-neutral-base-50 | #747474 PALETTE_NEUTRAL_50 |
| --slds-g-color-neutral-base-40 | #5C5C5C PALETTE_NEUTRAL_40 |
| --slds-g-color-neutral-base-30 | #444444 PALETTE_NEUTRAL_30 |
| --slds-g-color-neutral-base-20 | #2E2E2E PALETTE_NEUTRAL_20 |
| --slds-g-color-neutral-base-15 | #242424 PALETTE_NEUTRAL_15 |
| --slds-g-color-neutral-base-10 | #181818 PALETTE_NEUTRAL_10 |
| --slds-g-color-brand-base-100 | #FFFFFF PALETTE_BLUE_100 |
| --slds-g-color-brand-base-95 | #EEF4FF PALETTE_BLUE_95 |
| --slds-g-color-brand-base-90 | #D8E6FE PALETTE_BLUE_90 |
| --slds-g-color-brand-base-80 | #AACBFF PALETTE_BLUE_80 |
| --slds-g-color-brand-base-70 | #78B0FD PALETTE_BLUE_70 |
| --slds-g-color-brand-base-65 | #57A3FD PALETTE_BLUE_65 |
| --slds-g-color-brand-base-60 | #1B96FF PALETTE_BLUE_60 |
| --slds-g-color-brand-base-50 | #0176D3 PALETTE_BLUE_50 |
| --slds-g-color-brand-base-40 | #0B5CAB PALETTE_BLUE_40 |
| --slds-g-color-brand-base-30 | #014486 PALETTE_BLUE_30 |
| --slds-g-color-brand-base-20 | #032D60 PALETTE_BLUE_20 |
| --slds-g-color-brand-base-15 | #03234D PALETTE_BLUE_15 |
| --slds-g-color-brand-base-10 | #001639 PALETTE_BLUE_10 |
| --slds-g-color-error-base-100 | #FFFFFF PALETTE_NEUTRAL_100 |
| --slds-g-color-error-base-90 | #FEDED8 PALETTE_RED_90 |
| --slds-g-color-error-base-80 | #FEB8AB PALETTE_RED_80 |
| --slds-g-color-error-base-70 | #FE8F7D PALETTE_RED_70 |
| --slds-g-color-error-base-60 | #FE5C4C PALETTE_RED_60 |
| --slds-g-color-error-base-50 | #EA001E PALETTE_RED_50 |
| --slds-g-color-error-base-40 | #BA0517 PALETTE_RED_40 |
| --slds-g-color-error-base-30 | #8E030F PALETTE_RED_30 |
| --slds-g-color-error-base-20 | #640103 PALETTE_RED_20 |
| --slds-g-color-error-base-10 | #300C01 PALETTE_RED_10 |
| --slds-g-color-warning-base-100 | #FFFFFF PALETTE_NEUTRAL_100 |
| --slds-g-color-warning-base-90 | #FEDFD0 PALETTE_ORANGE_90 |
| --slds-g-color-warning-base-80 | #FFBA90 PALETTE_ORANGE_80 |
| --slds-g-color-warning-base-70 | #FE9339 PALETTE_ORANGE_70 |
| --slds-g-color-warning-base-60 | #DD7A01 PALETTE_ORANGE_60 |
| --slds-g-color-warning-base-50 | #A96404 PALETTE_ORANGE_50 |
| --slds-g-color-warning-base-40 | #825101 PALETTE_ORANGE_40 |
| --slds-g-color-warning-base-30 | #5F3E02 PALETTE_ORANGE_30 |
| --slds-g-color-warning-base-20 | #3E2B02 PALETTE_ORANGE_20 |
| --slds-g-color-warning-base-10 | #201600 PALETTE_ORANGE_10 |
| --slds-g-color-success-base-100 | #FFFFFF PALETTE_NEUTRAL_100 |
| --slds-g-color-success-base-90 | #CDEFC4 PALETTE_GREEN_90 |
| --slds-g-color-success-base-80 | #91DB8B PALETTE_GREEN_80 |
| --slds-g-color-success-base-70 | #45C65A PALETTE_GREEN_70 |
| --slds-g-color-success-base-60 | #3BA755 PALETTE_GREEN_60 |
| --slds-g-color-success-base-50 | #2E844A PALETTE_GREEN_50 |
| --slds-g-color-success-base-40 | #396547 PALETTE_GREEN_40 |
| --slds-g-color-success-base-30 | #194E31 PALETTE_GREEN_30 |
| --slds-g-color-success-base-20 | #1C3326 PALETTE_GREEN_20 |
| --slds-g-color-success-base-10 | #071B12 PALETTE_GREEN_10 |
| --slds-g-color-border-base-1 | #C9C9C9 PALETTE_NEUTRAL_80 |
| --slds-g-color-border-base-2 | #AEAEAE PALETTE_NEUTRAL_70 |
| --slds-g-color-border-base-3 | #939393 PALETTE_NEUTRAL_60 |
| --slds-g-color-border-base-4 | #747474 PALETTE_NEUTRAL_50 |
| --slds-g-color-border-brand-1 | #78B0FD PALETTE_BLUE_70 |
| --slds-g-color-border-brand-2 | #1B96FF PALETTE_BLUE_60 |
| --slds-g-link-color | #0B5CAB PALETTE_BLUE_40 |
| --slds-g-link-color-hover | #014486 PALETTE_BLUE_30 |
| --slds-g-link-color-focus | #014486 PALETTE_BLUE_30 |
| --slds-g-link-color-active | #032D60 PALETTE_BLUE_20 |
| --slds-g-color-neutral-10-opacity-10 | rgba(24, 24, 24, 0.1) |
| --slds-g-color-neutral-10-opacity-25 | rgba(24, 24, 24, 0.25) |
| --slds-g-color-neutral-10-opacity-50 | rgba(24, 24, 24, 0.5) |
| --slds-g-color-neutral-10-opacity-75 | rgba(24, 24, 24, 0.75) |
| --slds-g-color-neutral-100-opacity-10 | rgba(255, 255, 255, 0.1) |
| --slds-g-color-neutral-100-opacity-25 | rgba(255, 255, 255, 0.25) |
| --slds-g-color-neutral-100-opacity-50 | rgba(255, 255, 255, 0.5) |
| --slds-g-color-neutral-100-opacity-75 | rgba(255, 255, 255, 0.75) |
Palette ColorsPalette Colors
Generic colors to use within a Salesforce application.
| Styling Hook | Example |
|---|---|
| --slds-g-color-palette-blue-10 | #001639 PALETTE_BLUE_10 |
| --slds-g-color-palette-blue-15 | #03234D PALETTE_BLUE_15 |
| --slds-g-color-palette-blue-20 | #032D60 PALETTE_BLUE_20 |
| --slds-g-color-palette-blue-30 | #014486 PALETTE_BLUE_30 |
| --slds-g-color-palette-blue-40 | #0B5CAB PALETTE_BLUE_40 |
| --slds-g-color-palette-blue-50 | #0176D3 PALETTE_BLUE_50 |
| --slds-g-color-palette-blue-60 | #1B96FF PALETTE_BLUE_60 |
| --slds-g-color-palette-blue-65 | #57A3FD PALETTE_BLUE_65 |
| --slds-g-color-palette-blue-70 | #78B0FD PALETTE_BLUE_70 |
| --slds-g-color-palette-blue-80 | #AACBFF PALETTE_BLUE_80 |
| --slds-g-color-palette-blue-90 | #D8E6FE PALETTE_BLUE_90 |
| --slds-g-color-palette-blue-95 | #EEF4FF PALETTE_BLUE_95 |
| --slds-g-color-palette-cloud-blue-10 | #001A28 PALETTE_CLOUD_BLUE_10 |
| --slds-g-color-palette-cloud-blue-15 | #0A2636 PALETTE_CLOUD_BLUE_15 |
| --slds-g-color-palette-cloud-blue-20 | #023248 PALETTE_CLOUD_BLUE_20 |
| --slds-g-color-palette-cloud-blue-30 | #084968 PALETTE_CLOUD_BLUE_30 |
| --slds-g-color-palette-cloud-blue-40 | #05628A PALETTE_CLOUD_BLUE_40 |
| --slds-g-color-palette-cloud-blue-50 | #107CAD PALETTE_CLOUD_BLUE_50 |
| --slds-g-color-palette-cloud-blue-60 | #0D9DDA PALETTE_CLOUD_BLUE_60 |
| --slds-g-color-palette-cloud-blue-65 | #08ABED PALETTE_CLOUD_BLUE_65 |
| --slds-g-color-palette-cloud-blue-70 | #1AB9FF PALETTE_CLOUD_BLUE_70 |
| --slds-g-color-palette-cloud-blue-80 | #90D0FE PALETTE_CLOUD_BLUE_80 |
| --slds-g-color-palette-cloud-blue-90 | #CFE9FE PALETTE_CLOUD_BLUE_90 |
| --slds-g-color-palette-cloud-blue-95 | #EAF5FE PALETTE_CLOUD_BLUE_95 |
| --slds-g-color-palette-green-10 | #071B12 PALETTE_GREEN_10 |
| --slds-g-color-palette-green-15 | #0C2912 PALETTE_GREEN_15 |
| --slds-g-color-palette-green-20 | #1C3326 PALETTE_GREEN_20 |
| --slds-g-color-palette-green-30 | #194E31 PALETTE_GREEN_30 |
| --slds-g-color-palette-green-40 | #396547 PALETTE_GREEN_40 |
| --slds-g-color-palette-green-50 | #2E844A PALETTE_GREEN_50 |
| --slds-g-color-palette-green-60 | #3BA755 PALETTE_GREEN_60 |
| --slds-g-color-palette-green-65 | #41B658 PALETTE_GREEN_65 |
| --slds-g-color-palette-green-70 | #45C65A PALETTE_GREEN_70 |
| --slds-g-color-palette-green-80 | #91DB8B PALETTE_GREEN_80 |
| --slds-g-color-palette-green-90 | #CDEFC4 PALETTE_GREEN_90 |
| --slds-g-color-palette-green-95 | #EBF7E6 PALETTE_GREEN_95 |
| --slds-g-color-palette-hot-orange-10 | #281202 PALETTE_HOT_ORANGE_10 |
| --slds-g-color-palette-hot-orange-15 | #421604 PALETTE_HOT_ORANGE_15 |
| --slds-g-color-palette-hot-orange-20 | #4A2413 PALETTE_HOT_ORANGE_20 |
| --slds-g-color-palette-hot-orange-30 | #7E2600 PALETTE_HOT_ORANGE_30 |
| --slds-g-color-palette-hot-orange-40 | #AA3001 PALETTE_HOT_ORANGE_40 |
| --slds-g-color-palette-hot-orange-50 | #D83A00 PALETTE_HOT_ORANGE_50 |
| --slds-g-color-palette-hot-orange-60 | #FF5D2D PALETTE_HOT_ORANGE_60 |
| --slds-g-color-palette-hot-orange-65 | #FF784F PALETTE_HOT_ORANGE_65 |
| --slds-g-color-palette-hot-orange-70 | #FF906E PALETTE_HOT_ORANGE_70 |
| --slds-g-color-palette-hot-orange-80 | #FEB9A5 PALETTE_HOT_ORANGE_80 |
| --slds-g-color-palette-hot-orange-90 | #FFDED5 PALETTE_HOT_ORANGE_90 |
| --slds-g-color-palette-hot-orange-95 | #FEF1ED PALETTE_HOT_ORANGE_95 |
| --slds-g-color-palette-indigo-10 | #200647 PALETTE_INDIGO_10 |
| --slds-g-color-palette-indigo-15 | #1F0974 PALETTE_INDIGO_15 |
| --slds-g-color-palette-indigo-20 | #321D71 PALETTE_INDIGO_20 |
| --slds-g-color-palette-indigo-30 | #2F2CB7 PALETTE_INDIGO_30 |
| --slds-g-color-palette-indigo-40 | #3A49DA PALETTE_INDIGO_40 |
| --slds-g-color-palette-indigo-50 | #5867E8 PALETTE_INDIGO_50 |
| --slds-g-color-palette-indigo-60 | #7F8CED PALETTE_INDIGO_60 |
| --slds-g-color-palette-indigo-65 | #8E9BEF PALETTE_INDIGO_65 |
| --slds-g-color-palette-indigo-70 | #9EA9F1 PALETTE_INDIGO_70 |
| --slds-g-color-palette-indigo-80 | #BEC7F6 PALETTE_INDIGO_80 |
| --slds-g-color-palette-indigo-90 | #E0E5F8 PALETTE_INDIGO_90 |
| --slds-g-color-palette-indigo-95 | #F1F3FB PALETTE_INDIGO_95 |
| --slds-g-color-palette-orange-10 | #201600 PALETTE_ORANGE_10 |
| --slds-g-color-palette-orange-15 | #371E03 PALETTE_ORANGE_15 |
| --slds-g-color-palette-orange-20 | #3E2B02 PALETTE_ORANGE_20 |
| --slds-g-color-palette-orange-30 | #5F3E02 PALETTE_ORANGE_30 |
| --slds-g-color-palette-orange-40 | #825101 PALETTE_ORANGE_40 |
| --slds-g-color-palette-orange-50 | #A96404 PALETTE_ORANGE_50 |
| --slds-g-color-palette-orange-60 | #DD7A01 PALETTE_ORANGE_60 |
| --slds-g-color-palette-orange-65 | #F38303 PALETTE_ORANGE_65 |
| --slds-g-color-palette-orange-70 | #FE9339 PALETTE_ORANGE_70 |
| --slds-g-color-palette-orange-80 | #FFBA90 PALETTE_ORANGE_80 |
| --slds-g-color-palette-orange-90 | #FEDFD0 PALETTE_ORANGE_90 |
| --slds-g-color-palette-orange-95 | #FFF1EA PALETTE_ORANGE_95 |
| --slds-g-color-palette-pink-10 | #370114 PALETTE_PINK_10 |
| --slds-g-color-palette-pink-15 | #4B0620 PALETTE_PINK_15 |
| --slds-g-color-palette-pink-20 | #61022A PALETTE_PINK_20 |
| --slds-g-color-palette-pink-30 | #8A033E PALETTE_PINK_30 |
| --slds-g-color-palette-pink-40 | #B60554 PALETTE_PINK_40 |
| --slds-g-color-palette-pink-50 | #E3066A PALETTE_PINK_50 |
| --slds-g-color-palette-pink-60 | #FF538A PALETTE_PINK_60 |
| --slds-g-color-palette-pink-65 | #FE7298 PALETTE_PINK_65 |
| --slds-g-color-palette-pink-70 | #FE8AA7 PALETTE_PINK_70 |
| --slds-g-color-palette-pink-80 | #FDB6C5 PALETTE_PINK_80 |
| --slds-g-color-palette-pink-90 | #FDDDE3 PALETTE_PINK_90 |
| --slds-g-color-palette-pink-95 | #FEF0F3 PALETTE_PINK_95 |
| --slds-g-color-palette-purple-10 | #240643 PALETTE_PURPLE_10 |
| --slds-g-color-palette-purple-15 | #300B60 PALETTE_PURPLE_15 |
| --slds-g-color-palette-purple-20 | #401075 PALETTE_PURPLE_20 |
| --slds-g-color-palette-purple-30 | #5A1BA9 PALETTE_PURPLE_30 |
| --slds-g-color-palette-purple-40 | #7526E3 PALETTE_PURPLE_40 |
| --slds-g-color-palette-purple-50 | #9050E9 PALETTE_PURPLE_50 |
| --slds-g-color-palette-purple-60 | #AD7BEE PALETTE_PURPLE_60 |
| --slds-g-color-palette-purple-65 | #B78DEF PALETTE_PURPLE_65 |
| --slds-g-color-palette-purple-70 | #C29EF1 PALETTE_PURPLE_70 |
| --slds-g-color-palette-purple-80 | #D7BFF2 PALETTE_PURPLE_80 |
| --slds-g-color-palette-purple-90 | #ECE1F9 PALETTE_PURPLE_90 |
| --slds-g-color-palette-purple-95 | #F6F2FB PALETTE_PURPLE_95 |
| --slds-g-color-palette-red-10 | #300C01 PALETTE_RED_10 |
| --slds-g-color-palette-red-15 | #4A0C04 PALETTE_RED_15 |
| --slds-g-color-palette-red-20 | #640103 PALETTE_RED_20 |
| --slds-g-color-palette-red-30 | #8E030F PALETTE_RED_30 |
| --slds-g-color-palette-red-40 | #BA0517 PALETTE_RED_40 |
| --slds-g-color-palette-red-50 | #EA001E PALETTE_RED_50 |
| --slds-g-color-palette-red-60 | #FE5C4C PALETTE_RED_60 |
| --slds-g-color-palette-red-65 | #FE7765 PALETTE_RED_65 |
| --slds-g-color-palette-red-70 | #FE8F7D PALETTE_RED_70 |
| --slds-g-color-palette-red-80 | #FEB8AB PALETTE_RED_80 |
| --slds-g-color-palette-red-90 | #FEDED8 PALETTE_RED_90 |
| --slds-g-color-palette-red-95 | #FEF1EE PALETTE_RED_95 |
| --slds-g-color-palette-teal-10 | #071B12 PALETTE_TEAL_10 |
| --slds-g-color-palette-teal-15 | #072825 PALETTE_TEAL_15 |
| --slds-g-color-palette-teal-20 | #023434 PALETTE_TEAL_20 |
| --slds-g-color-palette-teal-30 | #024D4C PALETTE_TEAL_30 |
| --slds-g-color-palette-teal-40 | #056764 PALETTE_TEAL_40 |
| --slds-g-color-palette-teal-50 | #0B827C PALETTE_TEAL_50 |
| --slds-g-color-palette-teal-60 | #06A59A PALETTE_TEAL_60 |
| --slds-g-color-palette-teal-65 | #03B4A7 PALETTE_TEAL_65 |
| --slds-g-color-palette-teal-70 | #01C3B3 PALETTE_TEAL_70 |
| --slds-g-color-palette-teal-80 | #04E1CB PALETTE_TEAL_80 |
| --slds-g-color-palette-teal-90 | #ACF3E4 PALETTE_TEAL_90 |
| --slds-g-color-palette-teal-95 | #DEF9F3 PALETTE_TEAL_95 |
| --slds-g-color-palette-violet-10 | #2E0039 PALETTE_VIOLET_10 |
| --slds-g-color-palette-violet-15 | #3D0157 PALETTE_VIOLET_15 |
| --slds-g-color-palette-violet-20 | #481A54 PALETTE_VIOLET_20 |
| --slds-g-color-palette-violet-30 | #730394 PALETTE_VIOLET_30 |
| --slds-g-color-palette-violet-40 | #9602C7 PALETTE_VIOLET_40 |
| --slds-g-color-palette-violet-50 | #BA01FF PALETTE_VIOLET_50 |
| --slds-g-color-palette-violet-60 | #CB65FF PALETTE_VIOLET_60 |
| --slds-g-color-palette-violet-65 | #D17DFE PALETTE_VIOLET_65 |
| --slds-g-color-palette-violet-70 | #D892FE PALETTE_VIOLET_70 |
| --slds-g-color-palette-violet-80 | #E5B9FE PALETTE_VIOLET_80 |
| --slds-g-color-palette-violet-90 | #F2DEFE PALETTE_VIOLET_90 |
| --slds-g-color-palette-violet-95 | #F9F0FF PALETTE_VIOLET_95 |
| --slds-g-color-palette-yellow-10 | #281202 PALETTE_YELLOW_10 |
| --slds-g-color-palette-yellow-15 | #2E2204 PALETTE_YELLOW_15 |
| --slds-g-color-palette-yellow-20 | #4F2100 PALETTE_YELLOW_20 |
| --slds-g-color-palette-yellow-30 | #6F3400 PALETTE_YELLOW_30 |
| --slds-g-color-palette-yellow-40 | #8C4B02 PALETTE_YELLOW_40 |
| --slds-g-color-palette-yellow-50 | #A86403 PALETTE_YELLOW_50 |
| --slds-g-color-palette-yellow-60 | #CA8501 PALETTE_YELLOW_60 |
| --slds-g-color-palette-yellow-65 | #D79304 PALETTE_YELLOW_65 |
| --slds-g-color-palette-yellow-70 | #E4A201 PALETTE_YELLOW_70 |
| --slds-g-color-palette-yellow-80 | #FCC003 PALETTE_YELLOW_80 |
| --slds-g-color-palette-yellow-90 | #F9E3B6 PALETTE_YELLOW_90 |
| --slds-g-color-palette-yellow-95 | #FBF3E0 PALETTE_YELLOW_95 |
| --slds-g-color-palette-neutral-10 | #181818 PALETTE_NEUTRAL_10 |
| --slds-g-color-palette-neutral-15 | #242424 PALETTE_NEUTRAL_15 |
| --slds-g-color-palette-neutral-20 | #2E2E2E PALETTE_NEUTRAL_20 |
| --slds-g-color-palette-neutral-30 | #444444 PALETTE_NEUTRAL_30 |
| --slds-g-color-palette-neutral-40 | #5C5C5C PALETTE_NEUTRAL_40 |
| --slds-g-color-palette-neutral-50 | #747474 PALETTE_NEUTRAL_50 |
| --slds-g-color-palette-neutral-60 | #939393 PALETTE_NEUTRAL_60 |
| --slds-g-color-palette-neutral-65 | #A0A0A0 PALETTE_NEUTRAL_65 |
| --slds-g-color-palette-neutral-70 | #AEAEAE PALETTE_NEUTRAL_70 |
| --slds-g-color-palette-neutral-80 | #C9C9C9 PALETTE_NEUTRAL_80 |
| --slds-g-color-palette-neutral-90 | #E5E5E5 PALETTE_NEUTRAL_90 |
| --slds-g-color-palette-neutral-95 | #F3F3F3 PALETTE_NEUTRAL_95 |
| --slds-g-color-palette-neutral-100 | #FFFFFF PALETTE_NEUTRAL_100 |