Colors - Keep React

The color palette includes primary, secondary, success, warning, and error colors. The primary color is used for branding and main actions, while the secondary color complements the primary and is used for secondary elements. The success color, usually green, indicates positive actions. The warning color, often yellow or orange, is used for cautionary information, and the error color, typically red, signifies errors or critical actions.

Table of Contents#

Colors#

Keep React includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

Primary

25

#f2f5ff

50

#e8edff

100

#aebfff

200

#94abff

300

#6f8eff

400

#4a72ff

500

#1b4dff

600

#0f3cd9

700

#042bb2

800

#042185

900

#00114a

Success

25

#eafef5

50

#d7f8e9

100

#8fe7b8

200

#48d28e

300

#2fd181

400

#1db469

500

#11a75c

600

#0a9952

700

#048746

800

#046a37

900

#02542b

Warning

25

#fff9df

50

#fff2c4

100

#ffe99d

200

#f7dc7c

300

#f8d34f

400

#f5c61e

500

#e9b90b

600

#d8a800

700

#b18a00

800

#896b00

900

#624d00

Error

25

#fff5f4

50

#ffdcda

100

#ffc5c1

200

#ffa19b

300

#ff7a72

400

#ff574d

500

#ff3838

600

#e92215

700

#d21a0e

800

#be170c

900

#ab0a00

Metal

25

#f9fafb

50

#f0f3f9

100

#e9eff6

200

#d7dfe9

300

#afbaca

400

#8897ae

500

#5e718d

600

#455468

700

#3d4a5c

800

#2d3643

900

#1c222b

Customize color palette#

You can customize the color palette by following these steps:

  1. tailwind.config.ts

    Open your tailwind.config.ts file.

    Pass your custom color palette as the second argument of the keepTheme function.

    import { keepTheme } from "keep-react/keepTheme";

const colorsPalette = {
  metal: {
    25: '...',
    50: '...',
    100: '...',
    200: '...',
    300: '...',
    400: '...',
    500: '...',
    600: '...',
    700: '...',
    800: '...',
    900: '...',
  },
  primary:{
    //... 25 - 900
  },
  secondary:{
    //... 25 - 900
  },
  success:{
    //... 25 - 900
  },
  warning:{
    //... 25 - 900
  },
  error:{
    //... 25 - 900
  },
}


const config = {
  //...config
}

export default keepTheme(config, colorsPalette);

  2. Single Color

    Customize Single Color

    If you don't need to change all the color accept one color. You can also do it by following this example below.

    import { keepTheme, colors } from "keep-react/keepTheme";

const colorsPalette = {
  ...colors,
  metal: {
   ...colors.metal,
   500: '...',
   600: '...',
   700: '...',
   800: '...',
   900: '...',
  }
}


const config = {
  //...config
}

export default keepTheme(config, colorsPalette);

  3. Important Note

    Don't do this

    You cannot change the names of the colors, but you can only change their color hex codes. But if you want to extend the color palette with your own colors, then you can do it. See the example below for more information.

    ❌ DON'T DO THIS

const colorsPalette = {
  background: {
    25: '...',
  },
}

✔ DO THIS

const colorsPalette = {
  metal: {
    25: 'Your color',
  },
}

✔ DO THIS

import { colors } from 'keep-react/keepTheme'
const colorsPalette = {
  ...colors,
  background: {
    25: 'Your color',
  },
}
Edit this pageDark Mode