Colors
Color palette with both beauty and accessibility.
1
3
5
10
20
30
40
50
60
70
80
90
95
97
99
Gray
BlueGray
Slate
ExaBlue
Red
Pink
Magenta
Purple
Violet
RoyalBlue
Blue
Cyan
Teal
Green
LightGreen
Lime
Yellow
Amber
Orange
Brown
DarkBrown
Enable Color Palette
By default, the above color palettes are not included, but the default color palette of Tailwind CSS is included.
To enable the exaBase Design System color palette, add a color definition file to your app:
lib/colors.json
{
"inherit": "inherit",
"current": "currentColor",
"transparent": "transparent",
"black": "#000",
"white": "#fff",
"gray": {
"1": "#fafafa",
"3": "#f0f0f0",
"5": "#e6e6e6",
"10": "#dbdbdb",
"20": "#c5c5c5",
"30": "#aeaeae",
"40": "#979797",
"50": "#808080",
"60": "#6e6e6e",
"70": "#5c5c5c",
"80": "#4a4a4a",
"90": "#383838",
"95": "#262626",
"97": "#141414",
"99": "#0a0a0a"
},
"blueGray": {
"1": "#f9fafa",
"3": "#eef0f1",
"5": "#e3e6e8",
"10": "#d8dbde",
"20": "#c0c5c9",
"30": "#a7aeb4",
"40": "#8e979f",
"50": "#75808a",
"60": "#656e77",
"70": "#545c63",
"80": "#444a50",
"90": "#33383d",
"95": "#232629",
"97": "#131416",
"99": "#090a0b"
},
"slate": {
"1": "#f9fafb",
"3": "#edeff2",
"5": "#e1e4e9",
"10": "#d4d9e0",
"20": "#b9c1cc",
"30": "#9ea9b9",
"40": "#8290a5",
"50": "#677891",
"60": "#59677d",
"70": "#4a5668",
"80": "#3c4654",
"90": "#2d3540",
"95": "#1f242c",
"97": "#101317",
"99": "#080a0c"
},
"exaBlue": {
"1": "#f6f5fd",
"3": "#e3e0f8",
"5": "#d0ccf4",
"10": "#bdb8f0",
"20": "#938ae6",
"30": "#695cdc",
"40": "#3e2ed2",
"50": "#1400c8",
"60": "#1100ac",
"70": "#0e0090",
"80": "#0c0074",
"90": "#090058",
"95": "#06003c",
"97": "#030020",
"99": "#020010"
},
"red": {
"1": "#fff6f5",
"3": "#fee3e2",
"5": "#fdd0ce",
"10": "#fcbdba",
"20": "#fa938e",
"30": "#f96962",
"40": "#f73e36",
"50": "#f5140a",
"60": "#d50f07",
"70": "#b30b04",
"80": "#930801",
"90": "#700500",
"95": "#4d0300",
"97": "#290100",
"99": "#150100"
},
"pink": {
"1": "#fff7fb",
"3": "#ffe7f2",
"5": "#ffd6ea",
"10": "#ffc6e2",
"20": "#ffa1cf",
"30": "#ff7cbc",
"40": "#ff58a9",
"50": "#ff3396",
"60": "#e42381",
"70": "#cb136b",
"80": "#ab0856",
"90": "#860042",
"95": "#5c002d",
"97": "#310018",
"99": "#18000c"
},
"magenta": {
"1": "#fef5fd",
"3": "#fce1f9",
"5": "#facdf5",
"10": "#f8b9f2",
"20": "#f48ce9",
"30": "#ef5fe0",
"40": "#eb32d8",
"50": "#e605cf",
"60": "#c703b3",
"70": "#a80297",
"80": "#87017a",
"90": "#67005d",
"95": "#470040",
"97": "#260022",
"99": "#120011"
},
"purple": {
"1": "#faf5fe",
"3": "#f0e1fc",
"5": "#e6cdfa",
"10": "#ddb9f8",
"20": "#c68cf4",
"30": "#b05ef0",
"40": "#9a31eb",
"50": "#8404e7",
"60": "#7202c8",
"70": "#5f01a7",
"80": "#4d0088",
"90": "#3a0068",
"95": "#280046",
"97": "#150026",
"99": "#0b0012"
},
"violet": {
"1": "#f8f5fe",
"3": "#ebe0fc",
"5": "#ddccfa",
"10": "#d0b8f9",
"20": "#b18af4",
"30": "#935cf0",
"40": "#742eec",
"50": "#5600e8",
"60": "#4a00c8",
"70": "#3e00a7",
"80": "#320087",
"90": "#260066",
"95": "#1a0046",
"97": "#0e0025",
"99": "#070013"
},
"royalBlue": {
"1": "#f6f7fe",
"3": "#e4e7fc",
"5": "#d2d7fa",
"10": "#c0c7f8",
"20": "#97a3f4",
"30": "#6e80f0",
"40": "#465ceb",
"50": "#1d38e7",
"60": "#132bcd",
"70": "#0b20b1",
"80": "#041793",
"90": "#001073",
"95": "#000a4e",
"97": "#00052a",
"99": "#000314"
},
"blue": {
"1": "#f6f9ff",
"3": "#e5ecfe",
"5": "#d3e0fd",
"10": "#c2d3fc",
"20": "#9bb7fa",
"30": "#739bf8",
"40": "#4c7ff6",
"50": "#2563f4",
"60": "#1852da",
"70": "#0d41be",
"80": "#05339e",
"90": "#00267b",
"95": "#001a54",
"97": "#000e2d",
"99": "#000717"
},
"cyan": {
"1": "#f5fcfe",
"3": "#e0f6fd",
"5": "#cceffc",
"10": "#b8e9fb",
"20": "#8adbf9",
"30": "#5ccdf7",
"40": "#2ebff4",
"50": "#00b1f2",
"60": "#0098d0",
"70": "#007fae",
"80": "#00678c",
"90": "#004e6a",
"95": "#003549",
"97": "#001c27",
"99": "#000e13"
},
"teal": {
"1": "#f5fdfd",
"3": "#e1faf8",
"5": "#cdf6f4",
"10": "#b9f2f0",
"20": "#8ceae6",
"30": "#5ee2dc",
"40": "#31dad2",
"50": "#04d2c8",
"60": "#02b6ad",
"70": "#019991",
"80": "#017c75",
"90": "#005e5a",
"95": "#00403d",
"97": "#002321",
"99": "#001110"
},
"green": {
"1": "#f5fbf5",
"3": "#e2f3e2",
"5": "#cfebcf",
"10": "#bce3bc",
"20": "#92d192",
"30": "#67c067",
"40": "#3cae3c",
"50": "#119c11",
"60": "#0b8a0b",
"70": "#067606",
"80": "#036203",
"90": "#004c00",
"95": "#003400",
"97": "#001c00",
"99": "#000d00"
},
"lightGreen": {
"1": "#fafdf5",
"3": "#f0f8e0",
"5": "#e6f3cc",
"10": "#dceeb8",
"20": "#c5e38a",
"30": "#aed85c",
"40": "#98cd2e",
"50": "#81c200",
"60": "#6fa700",
"70": "#5d8c00",
"80": "#4b7100",
"90": "#395500",
"95": "#273a00",
"97": "#151f00",
"99": "#0a1000"
},
"lime": {
"1": "#fefdf6",
"3": "#fbfae3",
"5": "#f8f6d0",
"10": "#f6f3bd",
"20": "#f0eb92",
"30": "#eae367",
"40": "#e4dc3d",
"50": "#ded412",
"60": "#c3b90b",
"70": "#a79f07",
"80": "#888203",
"90": "#6a6400",
"95": "#484500",
"97": "#272500",
"99": "#131200"
},
"yellow": {
"1": "#fffdf5",
"3": "#fefae2",
"5": "#fef6cf",
"10": "#fdf3bb",
"20": "#fceb90",
"30": "#fbe364",
"40": "#f9dc39",
"50": "#f8d40d",
"60": "#d8b808",
"70": "#b79c04",
"80": "#967f02",
"90": "#736100",
"95": "#4e4300",
"97": "#2a2300",
"99": "#151200"
},
"amber": {
"1": "#fffcf5",
"3": "#fef6e0",
"5": "#fef0cc",
"10": "#fdeab8",
"20": "#fcdd8a",
"30": "#fbd05c",
"40": "#fac22e",
"50": "#f9b500",
"60": "#d69c00",
"70": "#b38200",
"80": "#906900",
"90": "#6e5000",
"95": "#4b3600",
"97": "#281d00",
"99": "#140e00"
},
"orange": {
"1": "#fff9f5",
"3": "#feece0",
"5": "#fde0cc",
"10": "#fcd3b8",
"20": "#fab78a",
"30": "#f99b5c",
"40": "#f77e2e",
"50": "#f56200",
"60": "#d35400",
"70": "#b04700",
"80": "#8e3900",
"90": "#6c2b00",
"95": "#4a1d00",
"97": "#271000",
"99": "#140800"
},
"brown": {
"1": "#fbf8f5",
"3": "#f2eae2",
"5": "#eaddcf",
"10": "#e1cfbc",
"20": "#ceb091",
"30": "#bb9265",
"40": "#a8733a",
"50": "#95540f",
"60": "#83480a",
"70": "#713c05",
"80": "#5d3102",
"90": "#492500",
"95": "#321900",
"97": "#1a0d00",
"99": "#0d0700"
},
"darkBrown": {
"1": "#faf7f5",
"3": "#efe7e2",
"5": "#e4d7ce",
"10": "#dac7bb",
"20": "#c2a38f",
"30": "#aa7f63",
"40": "#925b37",
"50": "#7a370b",
"60": "#6b2f07",
"70": "#5c2704",
"80": "#4c1f02",
"90": "#3b1700",
"95": "#281000",
"97": "#160900",
"99": "#0b0400"
}
}
and customize your tailwind.config.js:
tailwind.config.js
const colors = require("./src/lib/colors")
module.exports = {
theme: {
colors,
},
}You can now use our colors:
<div className="bg-exaBlue-50" />