colors.to
Back to #ffa500

Tailwind CSS Palette

Custom color palette generated from #ffa500

50#ffffff
100#fff7eb
200#ffeed7
300#ffe6c3
400#ffdeaf
500#ffd69b
600#ffce87
700#ffc573
800#ffbd5e
900#ffb548
950#ffad2e

How to Install

1

Open your tailwind.config.js file

Locate the configuration file in your project's root directory.

2

Add the color palette to your theme

Copy the following configuration into your theme's colors section:

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
  50: '#ffffff',
  100: '#fff7eb',
  200: '#ffeed7',
  300: '#ffe6c3',
  400: '#ffdeaf',
  500: '#ffd69b',
  600: '#ffce87',
  700: '#ffc573',
  800: '#ffbd5e',
  900: '#ffb548',
  950: '#ffad2e',
},
      },
    },
  },
  plugins: [],
}
3

Use the colors in your HTML/JSX

You can now use your custom colors with Tailwind utility classes:

<!-- Background color -->
<div class="bg-custom-500">...</div>

<!-- Text color -->
<p class="text-custom-700">...</p>

<!-- Border color -->
<div class="border-custom-300">...</div>

<!-- Hover states -->
<button class="bg-custom-500 hover:bg-custom-600">...</button>

Alternative: CSS Variables

If you prefer using CSS custom properties, here are the variables:

:root {
--color-custom-50: #ffffff;
--color-custom-100: #fff7eb;
--color-custom-200: #ffeed7;
--color-custom-300: #ffe6c3;
--color-custom-400: #ffdeaf;
--color-custom-500: #ffd69b;
--color-custom-600: #ffce87;
--color-custom-700: #ffc573;
--color-custom-800: #ffbd5e;
--color-custom-900: #ffb548;
--color-custom-950: #ffad2e;
}

Individual Color Values

custom-50
#ffffff
custom-100
#fff7eb
custom-200
#ffeed7
custom-300
#ffe6c3
custom-400
#ffdeaf
custom-500
#ffd69b
custom-600
#ffce87
custom-700
#ffc573
custom-800
#ffbd5e
custom-900
#ffb548
custom-950
#ffad2e

Learn more about customizing colors in Tailwind CSS