Colors

Style includes Tailwind’s complete default color palette — every color family with shades from 50 to 950.

---

Using colors

Colors are used through utility prefixes. The format is {utility}-{color}-{shade}:

Style('bg-sky-500', child: ...)        // Background color
Style('text-gray-900', child: ...)     // Text color
Style('border-pink-300', child: ...)   // Border color
Style('ring-indigo-500', child: ...)   // Ring color
Style('outline-violet-500', child: ...) // Outline color

Color palette

class ColorPalettePage extends StatelessWidget {
  const ColorPalettePage({super.key});

  static const _shades = [
    '50',
    '100',
    '200',
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
    '950',
  ];

  static const _colors = [
    'red',
    'orange',
    'amber',
    'yellow',
    'lime',
    'green',
    'emerald',
    'teal',
    'cyan',
    'sky',
    'blue',
    'indigo',
    'violet',
    'purple',
    'fuchsia',
    'pink',
    'rose',
    'slate',
    'gray',
    'zinc',
    'neutral',
    'stone',
    'taupe',
    'mauve',
    'mist',
    'olive',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20),
        child: Style(
          'not-prose grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4',
          children: [
            Style(
              'top-28 z-9 col-start-2 grid grid-cols-11 '
              'justify-items-center gap-1.5 bg-white font-medium text-gray-950 '
              '*:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 '
              'sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] '
              'lg:top-14 dark:bg-gray-950 dark:text-white',
              children: [for (final s in _shades) Text(s)],
            ),
            for (final color in _colors) ...[
              Style(
                'font-medium text-gray-950 capitalize sm:pr-12 dark:text-white',
                child: Text(color),
              ),
              Style(
                'grid grid-cols-11 gap-1.5 sm:gap-4',
                children: [
                  for (final shade in _shades)
                    Style(
                      'bg-$color-$shade aspect-square rounded-md',
                      child: const SizedBox.shrink(),
                    ),
                ],
              ),
            ],
          ],
        ),
      ),
    );
  }
}

Available color families

The full palette matches the Tailwind CSS v4 default palette:

Warm: red, orange, amber, yellow

Cool: lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Neutral: slate, gray, zinc, neutral, stone

Extended neutrals (v4): mauve, olive, mist, taupe

Special: black, white

Each color has shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

---

Color opacity

Append /{opacity} to any color utility to set its opacity:

Style('bg-sky-500/10')
Style('bg-sky-500/20')
Style('bg-sky-500/30')
Style('bg-sky-500/40')
Style('bg-sky-500/50')
Style('bg-sky-500/60')
Style('bg-sky-500/70')
Style('bg-sky-500/80')
Style('bg-sky-500/90')
Style('bg-sky-500/100')

This works with any color utility:

Style('text-gray-900/80', child: ...)      // 80% opacity text
Style('border-pink-300/50', child: ...)    // 50% opacity border
Style('ring-indigo-500/30', child: ...)    // 30% opacity ring
Style('bg-black/75', child: ...)           // 75% opacity black

---

Colors with dark mode

Pair colors with dark: to adapt to dark mode. The first preview follows the docs site theme; the second is locked to dark so you can compare the two side-by-side:

Style('flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 ...', children: [
  Style('inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 ...', child: Style('size-6 text-pink-700', child: Icon(Icons.notifications_outlined))),
  Style('flex flex-col', children: [
    Style('text-gray-700', children: [
      Style('font-medium text-gray-950', child: Text('Tom Watson')),
      Text('mentioned you in'),
      Style('font-medium text-gray-950', child: Text('Logo redesign')),
    ]),
    Style('mt-1 text-gray-500', child: Text('9:37am')),
  ]),
])

Common dark mode color patterns:

Light	Dark	Purpose
bg-white	dark:bg-gray-800	Card backgrounds
text-gray-900	dark:text-white	Headings
text-gray-500	dark:text-gray-400	Body text
border-gray-200	dark:border-gray-700	Borders
ring-gray-900/5	dark:ring-white/10	Subtle rings

---

Custom color palettes

Define your own named color palettes with StyleTheme:

class BrandColorExample extends StatelessWidget {
  const BrandColorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return StyleTheme(
      data: StyleThemeData(
        colors: {
          'brand': {
            50: Color(0xFFEFF6FF),
            100: Color(0xFFDBEAFE),
            500: Color(0xFF316FF6),
            700: Color(0xFF1D4ED8),
            900: Color(0xFF1E3A8A),
          },
        },
      ),
      child: Style(
        'bg-brand-500 hover:bg-brand-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg',
        child: Text('Brand Button'),
      ),
    );
  }
}

Custom colors work with all color utilities (bg-, text-, border-, ring-, etc.) and support opacity modifiers (bg-brand-500/50). See Custom themes for full documentation.

---

Arbitrary colors

Use square brackets for colors outside the default palette:

Style('bg-[#316ff6]', child: ...)           // Hex color
Style('text-[rgb(255,0,128)]', child: ...)  // RGB color

---

Color utilities reference

Prefix	Property
bg-	Background color
text-	Text color
border-	Border color
outline-	Outline color
ring-	Ring (box-shadow) color
divide-	Divide (between children) color
accent-	Form accent color
caret-	Text cursor color
decoration-	Text decoration color
shadow-	Box shadow color