Color
Palette primitives and semantic aliases — backgrounds, foregrounds, borders, and surfaces.
Paint UI with aliases (foregroundPrimary, backgroundBrand, borderDefault). The palette is the Foundation source those aliases resolve to in light and dark. Do not paste hex or raw palette keys into product UI.
surfaceOverlay is the modal scrim — Foundation RGBA, not a palette pair (--refineui-color-alias-surface-overlay).
Aliases
Section titled “Aliases”Live CSS variables. Captions show light / dark palette keys.
Background
backgroundBrandActiveneutralBlack / primaryLightGray
backgroundBrandDisabledneutral150 / neutral650
backgroundBrandHoverprimaryDarkGray / primaryLightGray
backgroundBrandStrongprimaryDarkGray / primaryGray
backgroundBrandSubtleprimaryLightGray / neutral800
backgroundBrandprimaryBlack / primaryGray
backgroundDiscoveryHoverpurple700 / purple300
backgroundDiscoverySubtlepurple100 / purple900
backgroundDiscoverypurple500 / purple500
backgroundErrorHoverred700 / red300
backgroundErrorSubtlered100 / red900
backgroundErrorred500 / red500
backgroundInfoHoverblue700 / blue300
backgroundInfoSubtleblue100 / blue900
backgroundInfoblue500 / blue500
backgroundPrimaryActiveneutral150 / neutral800
backgroundPrimaryHoverneutral100 / neutral850
backgroundPrimaryneutralWhite / neutral900
backgroundSuccessHovergreen700 / green300
backgroundSuccessSubtlegreen100 / green900
backgroundSuccessgreen500 / green500
backgroundSurfaceActiveneutral150 / neutral700
backgroundSurfaceDisabledneutral150 / neutral850
backgroundSurfaceHoverneutral100 / neutral750
backgroundSurfaceSelectedneutral200 / neutral650
backgroundSurfaceneutralWhite / neutral800
backgroundWarningHoveryellow500 / yellow200
backgroundWarningSubtleyellow100 / yellow900
backgroundWarningyellow300 / yellow300
Foreground
foregroundBrandStrongneutralBlack / primaryLightGray
foregroundBrandprimaryBlack / primaryGray
foregroundDisabledneutral400 / neutral600
foregroundDiscoverypurple700 / purple200
foregroundErrorred700 / red200
foregroundInfoblue700 / blue200
foregroundInversedneutralWhite / primaryBlack
foregroundLinkActiveblue900 / blue200
foregroundLinkHoverblue800 / blue300
foregroundLinkVisitedblue500 / blue100
foregroundLinkblue700 / blue400
foregroundOnBrandneutralWhite / neutralBlack
foregroundOnDiscoveryneutralWhite / neutralBlack
foregroundOnErrorneutralWhite / neutralBlack
foregroundOnInfoneutralWhite / neutralBlack
foregroundOnSuccessneutralWhite / neutralBlack
foregroundOnWarningneutralWhite / neutralBlack
foregroundPlaceholderneutral450 / neutral500
foregroundPrimaryHoverneutralBlack / neutral100
foregroundPrimaryprimaryBlack / neutralWhite
foregroundSecondaryneutral600 / neutral350
foregroundSuccessgreen700 / green200
foregroundTertiaryneutral500 / neutral450
foregroundWarningyellow700 / yellow200
Border
borderDefaultneutral300 / neutral650
borderDisabledneutral250 / neutral700
borderDiscoverypurple500 / purple500
borderErrorred500 / red500
borderFocusneutral750 / neutral350
borderHoverneutral500 / neutral500
borderInfoblue500 / blue500
borderStrongneutral450 / neutral550
borderSubtleneutral200 / neutral750
borderSuccessgreen500 / green500
borderWarningyellow300 / yellow300
Surface
surfaceElevatedneutralWhite / neutral700
surfaceInverseneutralBlack / neutralWhite
surfacePopoverneutralWhite / neutral750
surfaceSunkenneutral150 / neutral800
surfaceTooltipneutral750 / neutral300
Palette
Section titled “Palette”Primary
LightGray Gray DarkGray Black
Neutral
White 100 150 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 Black
Red
100 200 300 400 500 600 700 800 900 1000
Orange
100 200 300 400 500 600 700 800 900 1000
Yellow
100 200 300 400 500 600 700 800 900 1000
Lime
100 200 300 400 500 600 700 800 900 1000
Green
100 200 300 400 500 600 700 800 900 1000
Teal
100 200 300 400 500 600 700 800 900 1000
Blue
100 200 300 400 500 600 700 800 900 1000
Purple
100 200 300 400 500 600 700 800 900 1000
Magenta
100 200 300 400 500 600 700 800 900 1000
<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge" border="strokeWidthThin" borderColor="borderDefault"> Surface</Box>import { semanticColorCssVar } from "@refineui/utilities";
<div style={{ color: semanticColorCssVar("foregroundPrimary") }} />