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
/** @type {import('shilpcss/types').ShilpConfig} */
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;