open-props/src/props.colors-hsl.js

<div align="center">

/* generated mostly with props.colors.src.js */
export const Gray = {
  '--gray-0-hsl': '210 17% 98%',
  '--gray-1-hsl': '210 17% 95%',
  '--gray-2-hsl': '210 16% 93%',
  '--gray-3-hsl': '210 14% 89%',
  '--gray-4-hsl': '210 14% 83%',
  '--gray-5-hsl': '210 11% 71%',
  '--gray-6-hsl': '210 7% 56%',
  '--gray-7-hsl': '210 9% 31%',
  '--gray-8-hsl': '210 10% 23%',
  '--gray-9-hsl': '210 11% 15%',
}

export const Red = {
  '--red-0-hsl': '0 100% 98%',
  '--red-1-hsl': '0 100% 95%',
  '--red-2-hsl': '0 100% 89%',
  '--red-3-hsl': '0 100% 83%',
  '--red-4-hsl': '0 100% 76%',
  '--red-5-hsl': '0 100% 71%',
  '--red-6-hsl': '0 94% 65%',
  '--red-7-hsl': '0 86% 59%',
  '--red-8-hsl': '0 74% 54%',
  '--red-9-hsl': '0 65% 48%',
}

export const Pink = {
  '--pink-0-hsl': '336 100% 97%',
  '--pink-1-hsl': '336 100% 94%',
  '--pink-2-hsl': '338 91% 87%',
  '--pink-3-hsl': '339 90% 81%',
  '--pink-4-hsl': '339 88% 74%',
  '--pink-5-hsl': '339 82% 67%',
  '--pink-6-hsl': '339 76% 59%',
  '--pink-7-hsl': '339 67% 52%',
  '--pink-8-hsl': '339 68% 45%',
  '--pink-9-hsl': '339 69% 38%',
}

export const Grape = {
  '--grape-0-hsl': '280 67% 96%',
  '--grape-1-hsl': '287 77% 92%',
  '--grape-2-hsl': '288 86% 86%',
  '--grape-3-hsl': '289 85% 78%',
  '--grape-4-hsl': '288 83% 71%',
  '--grape-5-hsl': '288 75% 64%',
  '--grape-6-hsl': '288 67% 58%',
  '--grape-7-hsl': '288 56% 52%',
  '--grape-8-hsl': '288 54% 46%',
  '--grape-9-hsl': '288 54% 40%',
}

export const Violet = {
  '--violet-0-hsl': '252 100% 97%',
  '--violet-1-hsl': '257 100% 93%',
  '--violet-2-hsl': '256 100% 87%',
  '--violet-3-hsl': '255 94% 79%',
  '--violet-4-hsl': '255 93% 72%',
  '--violet-5-hsl': '255 91% 67%',
  '--violet-6-hsl': '255 86% 63%',
  '--violet-7-hsl': '255 78% 60%',
  '--violet-8-hsl': '255 67% 55%',
  '--violet-9-hsl': '255 53% 50%',
}

export const Indigo = {
  '--indigo-0-hsl': '223 100% 96%',
  '--indigo-1-hsl': '225 100% 93%',
  '--indigo-2-hsl': '228 100% 86%',
  '--indigo-3-hsl': '228 100% 78%',
  '--indigo-4-hsl': '228 96% 72%',
  '--indigo-5-hsl': '228 94% 67%',
  '--indigo-6-hsl': '228 89% 63%',
  '--indigo-7-hsl': '228 81% 59%',
  '--indigo-8-hsl': '228 69% 55%',
  '--indigo-9-hsl': '230 57% 50%',
}

export const Blue = {
  '--blue-0-hsl': '205 100% 95%',
  '--blue-1-hsl': '206 100% 91%',
  '--blue-2-hsl': '206 100% 82%',
  '--blue-3-hsl': '206 96% 72%',
  '--blue-4-hsl': '207 91% 64%',
  '--blue-5-hsl': '207 86% 57%',
  '--blue-6-hsl': '208 80% 52%',
  '--blue-7-hsl': '208 77% 47%',
  '--blue-8-hsl': '209 77% 43%',
  '--blue-9-hsl': '209 75% 38%',
}

export const Cyan = {
  '--cyan-0-hsl': '185 81% 94%',
  '--cyan-1-hsl': '185 84% 88%',
  '--cyan-2-hsl': '186 77% 77%',
  '--cyan-3-hsl': '187 74% 65%',
  '--cyan-4-hsl': '187 69% 55%',
  '--cyan-5-hsl': '188 72% 47%',
  '--cyan-6-hsl': '187 80% 42%',
  '--cyan-7-hsl': '188 83% 37%',
  '--cyan-8-hsl': '189 85% 32%',
  '--cyan-9-hsl': '189 85% 28%',
}

export const Teal = {
  '--teal-0-hsl': '161 79% 95%',
  '--teal-1-hsl': '160 85% 87%',
  '--teal-2-hsl': '162 78% 77%',
  '--teal-3-hsl': '162 72% 65%',
  '--teal-4-hsl': '162 68% 54%',
  '--teal-5-hsl': '162 73% 46%',
  '--teal-6-hsl': '162 82% 40%',
  '--teal-7-hsl': '162 87% 35%',
  '--teal-8-hsl': '162 88% 30%',
  '--teal-9-hsl': '162 88% 26%',
}

export const Green = {
  '--green-0-hsl': '131 67% 95%',
  '--green-1-hsl': '128 76% 90%',
  '--green-2-hsl': '128 71% 82%',
  '--green-3-hsl': '129 68% 73%',
  '--green-4-hsl': '130 61% 64%',
  '--green-5-hsl': '130 57% 56%',
  '--green-6-hsl': '131 50% 50%',
  '--green-7-hsl': '131 53% 46%',
  '--green-8-hsl': '131 54% 40%',
  '--green-9-hsl': '132 52% 35%',
}

export const Lime = {
  '--lime-0-hsl': '79 81% 94%',
  '--lime-1-hsl': '80 83% 88%',
  '--lime-2-hsl': '81 81% 80%',
  '--lime-3-hsl': '82 75% 69%',
  '--lime-4-hsl': '83 73% 59%',
  '--lime-5-hsl': '84 69% 51%',
  '--lime-6-hsl': '85 74% 45%',
  '--lime-7-hsl': '85 79% 40%',
  '--lime-8-hsl': '86 84% 36%',
  '--lime-9-hsl': '85 84% 32%',
}

export const Yellow = {
  '--yellow-0-hsl': '50 100% 93%',
  '--yellow-1-hsl': '49 100% 87%',
  '--yellow-2-hsl': '49 100% 80%',
  '--yellow-3-hsl': '48 100% 70%',
  '--yellow-4-hsl': '47 100% 62%',
  '--yellow-5-hsl': '45 97% 54%',
  '--yellow-6-hsl': '42 96% 50%',
  '--yellow-7-hsl': '39 100% 48%',
  '--yellow-8-hsl': '35 100% 47%',
  '--yellow-9-hsl': '31 100% 45%',
}

export const Orange = {
  '--orange-0-hsl': '34 100% 95%',
  '--orange-1-hsl': '33 100% 90%',
  '--orange-2-hsl': '33 100% 83%',
  '--orange-3-hsl': '32 100% 74%',
  '--orange-4-hsl': '31 100% 65%',
  '--orange-5-hsl': '29 100% 58%',
  '--orange-6-hsl': '27 98% 54%',
  '--orange-7-hsl': '24 94% 50%',
  '--orange-8-hsl': '21 90% 48%',
  '--orange-9-hsl': '17 87% 45%',
}

const ColorsHSL = {
  ...Gray,
  ...Red,
  ...Pink,
  ...Grape,
  ...Violet,
  ...Indigo,
  ...Blue,
  ...Cyan,
  ...Teal,
  ...Green,
  ...Lime,
  ...Yellow,
  ...Orange,
}

export default ColorsHSL