Colors - Flowbite React

Learn how to customize and override the default color system in Flowbite React, including base colors, semantic colors, and theme configuration for both Tailwind CSS v3 and v4

Flowbite React comes with a comprehensive color system that includes both base colors and semantic colors, along with additional theme configurations. This guide will show you how to use and customize these settings in your project.

Default Theme Settings#

Background Images#

These background images are used for various UI components:

const backgroundImage = {
  "arrow-down-icon":
    "url('data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20stroke%3D%22%236B7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m1%201%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')",
  "check-icon":
    "url('data:image/svg+xml,%3Csvg%20aria-hidden%3D%27true%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%20fill%3D%27none%27%20viewBox%3D%270%200%2016%2012%27%3E%3Cpath%20stroke%3D%27white%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%273%27%20d%3D%27M1%205.917%205.724%2010.5%2015%201.5%27/%3E%3C/svg%3E')",
  "dash-icon":
    "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2012%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%20d%3D%22M0.5%206h14%22%2F%3E%3C%2Fsvg%3E')",
  "dot-icon":
    "url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E')",
};

Box Shadows#

Additional box shadow utilities:

const boxShadow = {
  "sm-light": "0 2px 5px 0px rgba(255, 255, 255, 0.08)",
};

Color Map#

The complete set of colors with their full spectrum:

Color source:
Compare with:
brand
primary
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
lagoona
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Color source:
Compare with:

Customizing Colors#

Tailwind CSS v3#

For Tailwind CSS v3, you can customize colors by extending the theme in your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        // Override primary colors
        primary: {
          50: "#F0F9FF",
          100: "#E0F2FE",
          200: "#BAE6FD",
          300: "#7DD3FC",
          400: "#38BDF8",
          500: "#0EA5E9",
          600: "#0284C7",
          700: "#0369A1",
          800: "#075985",
          900: "#0C4A6E",
        },
      },
    },
  },
};

Tailwind CSS v4#

Tailwind CSS v4 introduces a new color system based on CSS variables. To customize colors define your color variables in the base layer:

@import "tailwindcss";

@theme {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
}