> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> Text, background, and border colors with semantic naming.

export const ColorPalette = () => {
  const [isShiftPressed, setIsShiftPressed] = useState(false);
  const [hoveredColor, setHoveredColor] = useState(null);
  const [copiedColor, setCopiedColor] = useState(null);
  useEffect(() => {
    const handleKeyDown = e => {
      if (e.key === 'Shift') {
        setIsShiftPressed(true);
      }
    };
    const handleKeyUp = e => {
      if (e.key === 'Shift') {
        setIsShiftPressed(false);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);
  const hexToOklch = hex => {
    hex = hex.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16) / 255;
    const g = parseInt(hex.substring(2, 4), 16) / 255;
    const b = parseInt(hex.substring(4, 6), 16) / 255;
    const toLinear = c => {
      return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    };
    const rLin = toLinear(r);
    const gLin = toLinear(g);
    const bLin = toLinear(b);
    const l = 0.4122214708 * rLin + 0.5363325363 * gLin + 0.0514459929 * bLin;
    const m = 0.2119034982 * rLin + 0.6806995451 * gLin + 0.1073969566 * bLin;
    const s = 0.0883024619 * rLin + 0.2817188376 * gLin + 0.6299787005 * bLin;
    const l_ = Math.cbrt(l);
    const m_ = Math.cbrt(m);
    const s_ = Math.cbrt(s);
    const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
    const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
    const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
    const C = Math.sqrt(a * a + b_ * b_);
    let H = Math.atan2(b_, a) * 180 / Math.PI;
    if (H < 0) H += 360;
    return `oklch(${(L * 100).toFixed(2)}% ${C.toFixed(3)} ${H.toFixed(2)})`;
  };
  const copyToClipboard = (color, isHex) => {
    const textToCopy = isHex ? color : hexToOklch(color);
    navigator.clipboard.writeText(textToCopy).then(() => {
      setCopiedColor(color);
      setTimeout(() => {
        setCopiedColor(null);
      }, 1500);
    }).catch(error => {
      console.error('Failed to copy: ', error);
    });
  };
  const colorPalette = [{
    name: 'Primary',
    shades: ['#ffffff', '#dfe7ff', '#bdd0ff', '#93b1ff', '#5f88ff', '#0740f9', '#0639dd', '#052fba', '#042695', '#031c70', '#02124b']
  }, {
    name: 'Secondary',
    shades: ['#ffffff', '#f2fcff', '#dff7fe', '#caf2fe', '#b9effd', '#aaebfd', '#7fd3ea', '#5db9d4', '#419cb6', '#2b7f96', '#1b5d70']
  }, {
    name: 'Neutral',
    shades: ['#ffffff', '#f3f4f6', '#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827', '#030712']
  }, {
    name: 'Success',
    shades: ['#ffffff', '#ebfaea', '#d5f4d4', '#afe7ae', '#79d979', '#3DC13C', '#2faa31', '#228e25', '#17731a', '#0f5811', '#083b09']
  }, {
    name: 'Warning',
    shades: ['#ffffff', '#fff7e1', '#feeebe', '#fde08d', '#f9cf4f', '#F4BB1B', '#d69c12', '#b37d0c', '#8f6008', '#6f4905', '#4b3103']
  }, {
    name: 'Error',
    shades: ['#ffffff', '#ffe8e8', '#ffc7c7', '#ff9b9b', '#f96a6a', '#F13737', '#d22c2c', '#b02121', '#8e1818', '#671010', '#450909']
  }];
  const shadeLabels = ['l-5', 'l-4', 'l-3', 'l-2', 'l-1', 'base', 'd-1', 'd-2', 'd-3', 'd-4', 'd-5'];
  return <div className="not-prose" style={{
    maxWidth: '100%',
    margin: '0 auto'
  }}>
      <div className="md:hidden">
        <div className="overflow-x-auto">
          <div style={{
    minWidth: '640px'
  }}>
            <div className="flex items-center mb-3">
              <div className="w-16 flex-shrink-0"></div>
              <div className="flex flex-1 gap-1.5">
                {shadeLabels.map(label => <div key={label} className={"text-xs font-medium w-7 text-center " + (label === 'base' ? 'text-zinc-950 dark:text-white' : 'text-zinc-950/70 dark:text-white/70')}>
                    {label}
                  </div>)}
              </div>
            </div>
            <div className="space-y-2">
              {colorPalette.map(colorFamily => <div key={colorFamily.name} className="flex items-center">
                  <div className="w-16 flex-shrink-0 text-xs text-zinc-950/80 dark:text-white/80 font-medium pr-2">
                    {colorFamily.name}
                  </div>
                  <div className="flex flex-1 gap-1.5">
                    {colorFamily.shades.map((shade, index) => <div key={index} className="aspect-square w-7 rounded cursor-pointer transition-transform hover:scale-110 active:scale-95 relative group border border-zinc-950/10 dark:border-white/10" style={{
    backgroundColor: shade
  }} onClick={e => copyToClipboard(shade, e.shiftKey)} onMouseEnter={() => setHoveredColor(shade)} onMouseLeave={() => setHoveredColor(null)} />)}
                  </div>
                </div>)}
            </div>
          </div>
        </div>
        <div className="mt-4 text-xs text-center text-zinc-500 dark:text-zinc-400">
          Tap any color to copy • Scroll horizontally to see all shades
        </div>
      </div>

      <div className="hidden md:block">
        <div className="flex items-center mb-4">
          <div className="w-24 flex-shrink-0"></div>
          <div className="flex flex-1 gap-3">
            {shadeLabels.map(label => <div key={label} className={"text-xs font-medium w-10 text-center " + (label === 'base' ? 'text-zinc-950 dark:text-white' : 'text-zinc-950/70 dark:text-white/70')}>
                {label}
              </div>)}
          </div>
        </div>
        <div className="space-y-4">
          {colorPalette.map(colorFamily => <div key={colorFamily.name} className="flex items-center">
              <div className="w-24 flex-shrink-0 text-sm text-zinc-950/80 dark:text-white/80 font-medium">
                {colorFamily.name}
              </div>
              <div className="flex flex-1 gap-3">
                {colorFamily.shades.map((shade, index) => <div key={index} className="aspect-square w-10 rounded-lg cursor-pointer transition-transform hover:scale-110 relative group border border-zinc-950/10 dark:border-white/10" style={{
    backgroundColor: shade
  }} onClick={e => copyToClipboard(shade, e.shiftKey)} onMouseEnter={() => setHoveredColor(shade)} onMouseLeave={() => setHoveredColor(null)}>
                    {copiedColor === shade ? <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-white/90 dark:bg-zinc-950/90 text-zinc-950 dark:text-white text-xs rounded-lg border border-zinc-950/20 dark:border-white/20 whitespace-nowrap opacity-100 pointer-events-none transition-opacity z-10 shadow-sm">
                        Copied!
                      </div> : <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-white/90 dark:bg-zinc-950/90 text-zinc-950 dark:text-white text-xs rounded-lg border border-zinc-950/20 dark:border-white/20 whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-10 shadow-sm">
                        {isShiftPressed ? shade : hexToOklch(shade)}
                      </div>}
                  </div>)}
              </div>
            </div>)}
        </div>
        <div className="mt-4 text-xs text-center text-zinc-500 dark:text-zinc-400">
          Click to copy • Hold Shift to copy HEX instead of OKLCH
        </div>
      </div>

      {copiedColor && <div className="md:hidden fixed bottom-4 left-1/2 -translate-x-1/2 px-3 py-2 bg-white/90 dark:bg-zinc-950/90 text-zinc-950 dark:text-white text-sm rounded-lg border border-zinc-950/20 dark:border-white/20 shadow-lg z-50 backdrop-blur-sm">
          Copied!
        </div>}
    </div>;
};

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Colors.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=bf42e1d15e2cb3a03a454d446ef7be01" className="dark:hidden block" alt="Colors overview cover" width="4054" height="2489" data-path="images-for-overview/Colors.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Colors%20-%20Dark.png" className="hidden dark:block" alt="Colors overview cover (dark)" />
</div>

## Overview

Color utilities cover text, background, and border tokens built on the same semantic palette.

## Base shades

| Name      | Base hex  |
| --------- | --------- |
| Primary   | `#0740f9` |
| Secondary | `#aaebfd` |
| Neutral   | `#6b7280` |
| Success   | `#3DC13C` |
| Warning   | `#F4BB1B` |
| Error     | `#F13737` |

## Color Palette

<Tip>Click a swatch to copy. Columns match **l-5** … **base** … **d-5**.</Tip>

<ColorPalette />

The utility references split **structural** white/black/gray classes from the six **semantic** tokens (with optional `-l-*` / `-d-*` steps): [Text colors](/colors/text-colors), [Background colors](/colors/background-colors), [Border colors](/colors/border-colors).

<CardGroup cols={2}>
  <Card title="Text Colors" icon="highlighter" href="/colors/text-colors">
    Semantic text color utilities
  </Card>

  <Card title="Background Colors" icon="image" href="/colors/background-colors">
    Background color utilities for sections and surfaces
  </Card>

  <Card title="Border Colors" icon="square" href="/colors/border-colors">
    Border color utilities that pair with the border system
  </Card>
</CardGroup>

## Accessibility

<Warning>
  Ensure text and interface colors preserve readable contrast. The palette is designed for sensible defaults, but context still matters.
</Warning>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Typography" icon="text-size" href="/concepts/typography">
    Text utilities that work with colors
  </Card>

  <Card title="Borders" icon="square" href="/concepts/borders">
    Border utilities with color support
  </Card>
</CardGroup>