@exabytellc/utils
Version:
EB react utils to make everything a little easier!
43 lines (38 loc) • 1.46 kB
JavaScript
export default function generateTailwindShades(baseColor) {
const hexToRgb = (hex) => {
const color = hex.startsWith("#") ? hex.slice(1) : hex;
const num = parseInt(color, 16);
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255,
};
};
const adjustBrightness = ({ r, g, b }, amount) => {
return {
r: Math.max(0, Math.min(255, r + amount)),
g: Math.max(0, Math.min(255, g + amount)),
b: Math.max(0, Math.min(255, b + amount)),
};
};
const rgbToCss = ({ r, g, b }) => `rgb(${r}, ${g}, ${b})`;
const baseRgb = hexToRgb(baseColor);
return {
50: rgbToCss(adjustBrightness(baseRgb, 200)),
100: rgbToCss(adjustBrightness(baseRgb, 160)),
200: rgbToCss(adjustBrightness(baseRgb, 120)),
300: rgbToCss(adjustBrightness(baseRgb, 80)),
400: rgbToCss(adjustBrightness(baseRgb, 40)),
500: rgbToCss(baseRgb),
600: rgbToCss(adjustBrightness(baseRgb, -40)),
700: rgbToCss(adjustBrightness(baseRgb, -80)),
800: rgbToCss(adjustBrightness(baseRgb, -120)),
900: rgbToCss(adjustBrightness(baseRgb, -160)),
1000: rgbToCss(adjustBrightness(baseRgb, -200)),
1100: rgbToCss(adjustBrightness(baseRgb, -240)),
1200: rgbToCss(adjustBrightness(baseRgb, -280)),
1300: rgbToCss(adjustBrightness(baseRgb, -320)),
1400: rgbToCss(adjustBrightness(baseRgb, -360)),
DEFAULT: rgbToCss(baseRgb),
};
}