Color collection
Chakra UI Colors
The color system from Chakra UI — 10 hues with 10 shades each (50–900). Designed for accessible, composable React interfaces.
About Chakra UI colors
Chakra UI is a popular React component library focused on accessibility and developer experience. Its color palette follows the same 50–900 scale as Tailwind CSS, making it familiar to most frontend developers.
Shade 500 is the primary/brand shade for each hue. Shades 50–400 are progressively lighter tints, useful for backgrounds and hover states. Shades 600–900 are darker, used for pressed states and text on light backgrounds.
Using Chakra UI colors
// npm install @chakra-ui/react
import { extendTheme } from '@chakra-ui/react';
// Access default tokens
import { theme } from '@chakra-ui/react';
theme.colors.blue[500] // '#3182CE'
import { extendTheme } from '@chakra-ui/react';
// Access default tokens
import { theme } from '@chakra-ui/react';
theme.colors.blue[500] // '#3182CE'