Skip to content

Popular Colors: Tailwind CSS and Bootstrap 5 Palettes

The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.

The default Tailwind CSS v3 palette: 22 colors in 11 shades (50–950). Use them as classes such as bg-sky-500 or text-slate-700. Click a shade to copy its HEX code.

slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Bootstrap 5.3 Sass colors: each theme color in 9 shades (100–900), available as $blue-500 and friends in Sass. Click a shade to copy its HEX code.

blue
indigo
purple
pink
red
orange
yellow
green
teal
cyan
gray

The color palettes developers use most

Tailwind CSS and Bootstrap are the two most widely used CSS frameworks, and their default palettes have become a common language for web colors. This page lists both in full with HEX codes, so you can match a design, pick a shade without opening the docs, or reuse the colors in a project that doesn't use the framework.

Tailwind CSS palette

The default Tailwind CSS v3 palette has 22 colors (five grays and seventeen hues) in 11 shades from 50 to 950. In your markup they are classes like bg-blue-500, text-slate-700 or border-emerald-300. Tailwind v4 defines its palette in the OKLCH color space; the HEX values here are the v3 colors many projects still use.

Bootstrap 5 colors

Bootstrap 5.3 has ten theme colors (blue, indigo, purple, pink, red, orange, yellow, green, teal and cyan) plus a gray scale. Each color has nine shades from 100 to 900. Shades 100–400 are the base color mixed with white, and 600–900 are mixed with black, in 20% steps. In Sass they are variables like $blue-500, and the CSS build exposes the base colors as custom properties such as var(--bs-blue).

Make your own scale

Want a scale like these for your own brand color? The tints & shades generator turns any color into a 50–950 scale and exports it for Tailwind, CSS or SCSS.

Tailwind CSS and Bootstrap are MIT-licensed projects. This page is not affiliated with either project.

More color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)
Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.
Color Palette Generator for Websites
Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Tints & Shades Generator (50–950 Color Scale)
Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.
Color Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.
CSS Color Names: All 148 Named Colors with HEX Codes
All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.
Color Families: Color Codes by Color Group
Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Web Safe Colors: The 216-Color Palette
The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.