Tools/Color & design

Color Shades & CSS Vars

Generate a tint/shade scale and CSS custom properties from a base color.

BasePrefix

Scale

#7efffc

#5df6df

#36d9c4

#00bda9

#00a28f

#008876

#006e5d

#005546

#003d30

#00261c

#001009

CSS variables + Tailwind

:root {
  --brand-50: #7efffc;
  --brand-100: #5df6df;
  --brand-200: #36d9c4;
  --brand-300: #00bda9;
  --brand-400: #00a28f;
  --brand-500: #008876;
  --brand-600: #006e5d;
  --brand-700: #005546;
  --brand-800: #003d30;
  --brand-900: #00261c;
  --brand-950: #001009;
}

{
  colors: {
    brand: {
      50: "#7efffc",
      100: "#5df6df",
      200: "#36d9c4",
      300: "#00bda9",
      400: "#00a28f",
      500: "#008876",
      600: "#006e5d",
      700: "#005546",
      800: "#003d30",
      900: "#00261c",
      950: "#001009",
    }
  }
}

Loading tool…