This section lists the available global color styling hooks.
System ColorsSystem Colors
System level styling hooks would provide a way to manage the visual appearance of elements across an entire application.
| 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 |