Colors Dataset

Location

Resolved location: shilpConfig.values.colors
Theme location: shilpConfig.theme.colors

Usage

These utilities read values from the theme, which is built from this dataset.

Dataset Structure

The dataset is a nested key–value map of color related tokens to CSS values.

It includes:

• currentColor
• transparent
• black
• white
• all Tailwind color palettes with 50–950 scales
• HTML named colors converted to OKLCH's (L% C H) format

See: Colors Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customize colors datasetcopy to clipboard
const shilpConfig = {
	source: "react",

	extend: {
		values: {
			colors: {
				gold: "85.2% 0.177 96.8",
				chocolate: "44.2% 0.154 53.4",
			},
		},
	},
};

export default shilpConfig;

This will make additional color tokens available through the theme system.

Colors Dataset Reference

Colors Datasetcopy to clipboard
// https://tailwindcss.com/docs/colors

const colors = {
	// global values
	current: "currentColor",
	none: "transparent",

	// extream colors
	black: "0% 0 0",
	white: "100% 0 0",

	// tailwindcss colors
	amber: {
		50: "98.7% 0.022 95.277",
		100: "96.2% 0.059 95.617",
		200: "92.4% 0.12 95.746",
		300: "87.9% 0.169 91.605",
		400: "82.8% 0.189 84.429",
		500: "76.9% 0.188 70.08",
		600: "66.6% 0.179 58.318",
		700: "55.5% 0.163 48.998",
		800: "47.3% 0.137 46.201",
		900: "41.4% 0.112 45.904",
		950: "27.9% 0.077 45.635",
	},
	blue: {
		50: "97.0% 0.014 254.604",
		100: "93.2% 0.032 255.585",
		200: "88.2% 0.059 254.128",
		300: "80.9% 0.105 251.813",
		400: "70.7% 0.165 254.624",
		500: "63.5% 0.188 255.435",
		600: "54.7% 0.18 255.273",
		700: "45.3% 0.161 254.249",
		800: "38.4% 0.136 254.044",
		900: "33.0% 0.112 254.28",
		950: "21.6% 0.072 255.166",
	},
	cyan: {
		50: "98.4% 0.019 200.873",
		100: "95.6% 0.045 203.388",
		200: "91.7% 0.08 205.041",
		300: "86.5% 0.127 207.078",
		400: "78.9% 0.154 211.53",
		500: "71.5% 0.143 215.221",
		600: "60.9% 0.126 221.723",
		700: "52.0% 0.105 223.128",
		800: "45.0% 0.085 224.283",
		900: "39.8% 0.07 227.392",
		950: "30.2% 0.056 229.695",
	},
	emerald: {
		50: "97.9% 0.021 166.113",
		100: "95.0% 0.052 163.051",
		200: "90.5% 0.093 164.15",
		300: "84.5% 0.143 164.978",
		400: "76.5% 0.177 163.223",
		500: "69.6% 0.17 162.48",
		600: "59.6% 0.145 163.225",
		700: "50.8% 0.118 165.612",
		800: "43.2% 0.095 166.913",
		900: "37.8% 0.077 168.94",
		950: "26.2% 0.051 172.552",
	},
	fuchsia: {
		50: "97.7% 0.017 320.058",
		100: "95.2% 0.037 318.852",
		200: "90.3% 0.076 319.62",
		300: "83.3% 0.145 321.434",
		400: "74% 0.238 322.16",
		500: "66.7% 0.295 322.15",
		600: "59.1% 0.293 322.896",
		700: "51.8% 0.253 323.949",
		800: "45.2% 0.211 324.591",
		900: "40.1% 0.17 325.612",
		950: "29.3% 0.136 325.661",
	},
	green: {
		50: "98.2% 0.018 155.826",
		100: "96.2% 0.044 156.743",
		200: "92.5% 0.084 155.995",
		300: "87.1% 0.15 154.449",
		400: "79.2% 0.209 151.711",
		500: "72.3% 0.219 149.579",
		600: "62.7% 0.194 149.214",
		700: "52.7% 0.154 150.069",
		800: "44.8% 0.119 151.328",
		900: "39.3% 0.095 152.535",
		950: "26.6% 0.065 152.934",
	},
	indigo: {
		50: "97.7% 0.019 267.65",
		100: "94.8% 0.052 272.172",
		200: "90.4% 0.101 277.565",
		300: "83.7% 0.159 283.378",
		400: "75.5% 0.215 289.388",
		500: "66.9% 0.246 292.267",
		600: "57.8% 0.237 295.646",
		700: "48.0% 0.213 298.097",
		800: "40.1% 0.174 299.506",
		900: "35.2% 0.145 302.264",
		950: "22.6% 0.102 305.114",
	},
	lime: {
		50: "98.6% 0.031 120.757",
		100: "96.7% 0.067 122.328",
		200: "93.8% 0.127 124.321",
		300: "89.7% 0.196 126.665",
		400: "84.1% 0.238 128.85",
		500: "76.8% 0.233 130.85",
		600: "64.8% 0.2 131.684",
		700: "53.2% 0.157 131.589",
		800: "45.3% 0.124 130.933",
		900: "40.5% 0.101 131.063",
		950: "27.4% 0.072 132.109",
	},
	orange: {
		50: "98.0% 0.016 73.684",
		100: "95.4% 0.038 75.164",
		200: "90.1% 0.076 70.697",
		300: "83.7% 0.128 66.29",
		400: "75.0% 0.183 55.934",
		500: "70.5% 0.213 47.604",
		600: "64.6% 0.222 41.116",
		700: "55.3% 0.195 38.402",
		800: "47.0% 0.157 37.304",
		900: "40.8% 0.123 38.172",
		950: "26.6% 0.079 36.259",
	},
	pink: {
		50: "98.4% 0.011 341.244",
		100: "95.4% 0.029 343.285",
		200: "90.9% 0.056 345.592",
		300: "85.5% 0.087 348.466",
		400: "77.3% 0.124 351.45",
		500: "69.3% 0.153 353.935",
		600: "59.4% 0.155 355.126",
		700: "49.7% 0.137 355.595",
		800: "41.9% 0.116 355.777",
		900: "36.7% 0.099 355.484",
		950: "24.6% 0.065 354.729",
	},
	purple: {
		50: "97.2% 0.027 341.336",
		100: "94.0% 0.065 344.176",
		200: "89.1% 0.119 348.558",
		300: "82.5% 0.186 351.887",
		400: "73.4% 0.254 355.256",
		500: "63.5% 0.292 357.692",
		600: "53.3% 0.296 359.171",
		700: "43.3% 0.268 359.125",
		800: "36.7% 0.22 358.29",
		900: "31.7% 0.175 356.718",
		950: "22.7% 0.125 354.518",
	},
	red: {
		50: "97.1% 0.013 17.38",
		100: "93.6% 0.032 17.717",
		200: "88.5% 0.062 18.334",
		300: "80.8% 0.114 19.571",
		400: "70.4% 0.191 22.216",
		500: "63.7% 0.237 25.331",
		600: "57.7% 0.245 27.325",
		700: "50.5% 0.213 27.518",
		800: "44.4% 0.177 26.899",
		900: "39.6% 0.141 25.723",
		950: "25.8% 0.092 26.042",
	},
	rose: {
		50: "96.9% 0.015 12.422",
		100: "94.1% 0.03 12.58",
		200: "89.2% 0.058 10.001",
		300: "81.0% 0.117 11.638",
		400: "71.2% 0.194 13.428",
		500: "64.5% 0.246 16.439",
		600: "58.6% 0.253 17.585",
		700: "51.4% 0.222 16.935",
		800: "45.5% 0.188 13.697",
		900: "41.0% 0.159 10.272",
		950: "27.1% 0.105 12.09",
	},
	sky: {
		50: "97.7% 0.013 236.62",
		100: "95.1% 0.026 236.824",
		200: "90.1% 0.058 230.902",
		300: "82.8% 0.111 230.318",
		400: "74.6% 0.16 232.661",
		500: "68.5% 0.169 237.323",
		600: "58.8% 0.158 241.966",
		700: "50.0% 0.134 242.749",
		800: "44.3% 0.11 240.79",
		900: "39.1% 0.09 240.876",
		950: "29.3% 0.066 243.157",
	},
	teal: {
		50: "98.4% 0.014 180.72",
		100: "95.3% 0.051 180.801",
		200: "91.0% 0.096 180.426",
		300: "85.5% 0.138 181.071",
		400: "77.7% 0.152 181.912",
		500: "70.4% 0.14 182.503",
		600: "60.0% 0.118 184.704",
		700: "51.1% 0.096 186.391",
		800: "43.7% 0.078 188.216",
		900: "38.6% 0.063 188.416",
		950: "27.7% 0.046 192.524",
	},
	violet: {
		50: "97.4% 0.022 312.781",
		100: "94.6% 0.062 315.027",
		200: "89.6% 0.11 318.493",
		300: "83.5% 0.172 322.146",
		400: "74.8% 0.23 325.312",
		500: "65.0% 0.255 327.545",
		600: "54.7% 0.253 328.914",
		700: "44.8% 0.22 329.391",
		800: "37.4% 0.173 329.316",
		900: "32.0% 0.138 328.979",
		950: "22.0% 0.095 329.564",
	},
	yellow: {
		50: "98.7% 0.026 102.212",
		100: "97.3% 0.071 103.193",
		200: "94.5% 0.129 101.54",
		300: "90.5% 0.182 98.111",
		400: "85.2% 0.199 91.936",
		500: "79.5% 0.184 86.047",
		600: "68.1% 0.162 75.834",
		700: "55.4% 0.135 66.442",
		800: "47.6% 0.114 61.907",
		900: "42.1% 0.095 57.708",
		950: "28.6% 0.066 53.813",
	},

	// gray shades
	gray: {
		50: "98.5% 0.002 247.839",
		100: "96.7% 0.003 264.542",
		200: "92.8% 0.006 264.531",
		300: "87.2% 0.01 258.338",
		400: "70.7% 0.022 261.325",
		500: "55.1% 0.027 264.364",
		600: "44.6% 0.03 256.802",
		700: "37.3% 0.034 259.733",
		800: "27.8% 0.033 256.848",
		900: "21.0% 0.034 264.665",
		950: "13.0% 0.028 261.69",
	},
	mauve: {
		50: "98.5% 0 0",
		100: "96% 0.003 325.6",
		200: "92.2% 0.005 325.62",
		300: "86.5% 0.012 325.68",
		400: "71.1% 0.019 323.02",
		500: "54.2% 0.034 322.5",
		600: "43.5% 0.029 321.78",
		700: "36.4% 0.029 323.89",
		800: "26.3% 0.024 320.12",
		900: "21.2% 0.019 322.12",
		950: "14.5% 0.008 326",
	},
	mist: {
		50: "98.7% 0.002 197.1",
		100: "96.3% 0.002 197.1",
		200: "92.5% 0.005 214.3",
		300: "87.2% 0.007 219.6",
		400: "72.3% 0.014 214.4",
		500: "56% 0.021 213.5",
		600: "45% 0.017 213.2",
		700: "37.8% 0.015 216",
		800: "27.5% 0.011 216.9",
		900: "21.8% 0.008 223.9",
		950: "14.8% 0.004 228.8",
	},
	neutral: {
		50: "98.5% 0 0",
		100: "97.0% 0 0",
		200: "92.2% 0 0",
		300: "87.0% 0 0",
		400: "70.8% 0 0",
		500: "55.6% 0 0",
		600: "43.9% 0 0",
		700: "37.1% 0 0",
		800: "26.9% 0 0",
		900: "20.5% 0 0",
		950: "14.5% 0 0",
	},
	olive: {
		50: "98.8% 0.003 106.5",
		100: "96.6% 0.005 106.5",
		200: "93% 0.007 106.5",
		300: "88% 0.011 106.6",
		400: "73.7% 0.021 106.9",
		500: "58% 0.031 107.3",
		600: "46.6% 0.025 107.3",
		700: "39.4% 0.023 107.4",
		800: "28.6% 0.016 107.4",
		900: "22.8% 0.013 107.4",
		950: "15.3% 0.006 107.1",
	},
	slate: {
		50: "98.4% 0.003 247.858",
		100: "96.8% 0.007 247.896",
		200: "92.9% 0.013 255.508",
		300: "86.9% 0.022 252.894",
		400: "70.4% 0.04 256.788",
		500: "55.4% 0.046 257.417",
		600: "44.6% 0.043 257.281",
		700: "37.2% 0.044 257.287",
		800: "27.9% 0.041 260.031",
		900: "20.8% 0.042 265.755",
		950: "12.9% 0.042 264.69",
	},
	stone: {
		50: "98.5% 0.001 106.423",
		100: "97.0% 0.001 106.424",
		200: "92.3% 0.003 48.717",
		300: "86.9% 0.005 56.366",
		400: "70.9% 0.01 56.259",
		500: "55.3% 0.013 58.071",
		600: "44.4% 0.011 73.639",
		700: "37.4% 0.01 67.558",
		800: "26.8% 0.007 34.298",
		900: "21.6% 0.006 56.043",
		950: "14.7% 0.004 49.2",
	},
	taupe: {
		50: "98.6% 0.002 67.8",
		100: "96% 0.002 17.2",
		200: "92.2% 0.005 34.3",
		300: "86.8% 0.007 39.5",
		400: "71.4% 0.014 41.2",
		500: "54.7% 0.021 43.1",
		600: "43.8% 0.017 39.3",
		700: "36.7% 0.016 35.7",
		800: "26.8% 0.011 36.5",
		900: "21.4% 0.009 43.1",
		950: "14.7% 0.004 49.3",
	},
	zinc: {
		50: "98.5% 0 0",
		100: "96.7% 0.001 286.375",
		200: "92.0% 0.004 286.32",
		300: "87.1% 0.006 286.286",
		400: "70.5% 0.015 286.067",
		500: "55.2% 0.016 285.938",
		600: "44.2% 0.017 285.786",
		700: "37.0% 0.013 285.805",
		800: "27.4% 0.006 286.033",
		900: "21.0% 0.006 285.885",
		950: "14.1% 0.005 285.82",
	},

	// html native colors
	html: {
		almond: "92.2% 0.073 97.7",
		aqua: {
			DEFAULT: "91.9% 0.249 198.3",
			marine: {
				DEFAULT: "88.3% 0.202 146.9",
				medium: "68.9% 0.181 141.6",
			},
		},
		azure: "97.7% 0.051 194.3",
		beige: "94.1% 0.029 107.8",
		bisque: "92.4% 0.064 94.7",
		black: "0% 0 0",
		blue: {
			DEFAULT: "32.5% 0.296 273.2",
			alice: "97.3% 0.055 274.1",
			cadet: "54.4% 0.073 192.1",
			flower: "68.4% 0.133 229.4",
			dark: "15.2% 0.203 269.2",
			dodger: "56.3% 0.213 221.2",
			light: "83.5% 0.085 216.1",
			medium: "38.9% 0.244 273.2",
			midnight: "9.1% 0.182 264.2",
			navy: "10.1% 0.213 272.9",
			powder: "79.5% 0.068 198.3",
			sky: {
				DEFAULT: "77.3% 0.135 195.8",
				dark: "68.7% 0.245 200.3",
				light: "78.7% 0.155 197.5",
			},
			steel: {
				DEFAULT: "45.5% 0.132 210.1",
				light: "72.4% 0.064 212.2",
			},
			violet: "46.4% 0.235 291.7",
		},
		brick: "36.8% 0.131 37.2",
		brown: {
			DEFAULT: "26.1% 0.150 40.1",
			rosy: "60.6% 0.055 38.7",
			saddle: "29.0% 0.131 44.4",
			sandy: "76.7% 0.131 59.3",
		},
		wood: "74.5% 0.081 76.6",
		chart: "83.3% 0.276 112.5",
		chocolate: "44.2% 0.154 53.4",
		coral: {
			DEFAULT: "72.5% 0.154 39.7",
			light: "65.2% 0.110 39.8",
		},
		corn: "97.0% 0.038 92.1",
		crimson: "33.9% 0.169 38.4",
		cyan: {
			DEFAULT: "91.9% 0.249 198.3",
			dark: "25.0% 0.170 193.1",
			light: "95.2% 0.062 191.6",
		},
		fuchsia: "60.4% 0.237 322.1",
		gainsboro: "86.8% 0.011 95.0",
		golden: {
			DEFAULT: "85.2% 0.177 96.8",
			rod: {
				DEFAULT: "66.5% 0.108 95.1",
				dark: "48.7% 0.123 96.8",
				light: "97.1% 0.037 92.1",
				pale: "90.3% 0.050 89.1",
			},
		},
		gray: {
			DEFAULT: "53.7% 0 0",
			dark: "57.2% 0 0",
			dim: "27.8% 0 0",
			light: "79.5% 0.006 96.6",
		},
		green: {
			DEFAULT: "40.0% 0.136 136.4",
			dark: "20.7% 0 136.4",
			forest: "29.0% 0.110 136.7",
			lawn: "89.4% 0.252 121.6",
			light: "81.3% 0.101 132.6",
			pale: "84.4% 0.113 133.4",
			royal: "42.9% 0.176 232.1",
			sea: {
				DEFAULT: "41.5% 0.119 139.4",
				dark: "70.1% 0.056 130.3",
				light: "52.7% 0.133 158.4",
				medium: "53.6% 0.123 142.0",
			},
			spring: {
				DEFAULT: "78.3% 0.287 134.6",
				medium: "75.3% 0.305 139.8",
			},
			yellow: "86.1% 0.171 117.3",
		},
		honey: {
			dew: "98.0% 0.011 130.6",
		},
		indigo: "25.3% 0.153 263.0",
		ivory: "99.9% 0.008 94.4",
		khaki: {
			DEFAULT: "89.1% 0.063 94.5",
			dark: "70.4% 0.059 94.5",
		},
		lace: "98.5% 0.031 88.2",
		lavender: {
			DEFAULT: "95.1% 0.044 278.4",
			blush: "99.3% 0.015 349.3",
		},
		lemon: "99.1% 0.042 97.1",
		lime: {
			DEFAULT: "91.2% 0.321 136.4",
			green: "69.1% 0.209 126.6",
		},
		linen: "97.3% 0.024 89.4",
		magenta: {
			DEFAULT: "60.4% 0.237 322.1",
			dark: "19.2% 0.138 320.6",
		},
		maroon: "21.4% 0.102 27.5",
		mint: {
			cream: "99.9% 0.011 139.3",
		},
		moccasin: "93.4% 0.061 91.6",
		olive: {
			DEFAULT: "49.4% 0.066 128.0",
			drab: "48.2% 0.094 109.1",
			dark: "32.4% 0.053 101.9",
		},
		orange: {
			DEFAULT: "73.1% 0.181 66.3",
			red: "58.6% 0.199 45.4",
			dark: "59.8% 0.157 65.6",
		},
		orchid: {
			DEFAULT: "65.0% 0.215 315.6",
			dark: "38.5% 0.169 292.2",
			medium: "54.5% 0.212 296.4",
		},
		papaya: "97.1% 0.047 89.4",
		peach: "94.5% 0.080 93.7",
		peru: "49.8% 0.121 66.8",
		pink: {
			DEFAULT: "86.4% 0.123 347.8",
			deep: "59.1% 0.228 332.6",
			hot: "72.4% 0.222 336.9",
			light: "85.9% 0.124 348.4",
		},
		plum: "63.5% 0.183 312.7",
		purple: {
			DEFAULT: "26.4% 0.124 314.9",
			medium: "55.6% 0.133 266.2",
			rebecca: "33.0% 0.137 274.5",
		},
		red: {
			DEFAULT: "53.3% 0.265 29.1",
			dark: "19.2% 0.103 27.5",
			indian: "51.7% 0.104 36.1",
		},
		rose: "96.1% 0.030 355.1",
		salmon: {
			DEFAULT: "71.8% 0.102 39.0",
			dark: "62.0% 0.1 41.0",
			light: "78.3% 0.109 37.9",
		},
		shell: "98.2% 0.025 88.3",
		sienna: "37.8% 0.143 48.3",
		silver: "75.7% 0 0",
		slate: {
			blue: {
				DEFAULT: "45.1% 0.176 252.3",
				dark: "28.5% 0.101 260.9",
				medium: "57.5% 0.152 246.9",
			},
			gray: {
				DEFAULT: "47.2% 0.042 236.3",
				dark: "26.5% 0.051 188.4",
				light: "55.7% 0.045 237.7",
			},
		},
		snow: "99.8% 0.011 89.8",
		tan: "71.6% 0.067 90.5",
		teal: "32.6% 0.098 190.7",
		thistle: "75.8% 0.112 302.1",
		tomato: "63.4% 0.160 37.9",
		turquoise: {
			DEFAULT: "62.6% 0.225 181.0",
			dark: "55.2% 0.203 188.6",
			medium: "64.5% 0.219 183.0",
			pale: "84.8% 0.140 173.7",
		},
		violet: {
			DEFAULT: "69.3% 0.204 311.7",
			dark: "28.3% 0.209 302.2",
			red: {
				medium: "46.8% 0.197 330.1",
				pale: "66.2% 0.159 345.2",
			},
		},
		wheat: "91.3% 0.070 92.4",
		white: {
			DEFAULT: "100% 0 0",
			antique: "94.9% 0.048 86.7",
			floral: "99.9% 0.011 94.6",
			ghost: "99.5% 0.010 268.3",
			smoke: "96.1% 0.006 94.3",
			navajo: "92.4% 0.062 89.5",
		},
		yellow: {
			DEFAULT: "94.4% 0.321 102.7",
			green: "70.4% 0.169 115.3",
			light: "99.5% 0.012 92.2",
		},
	},
};

export default colors;