# Hue Consistency

**SHOULD** · **ID:** `design-hue-consistency` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-hue-consistency

> SHOULD: Hue consistency: tint borders/shadows/text toward bg hue

Tint borders, shadows, and text toward background hue

Pure black borders and shadows look harsh on colored backgrounds. Slightly tint them toward the background color for a more cohesive, refined appearance. For example, on a blue background, use slightly blue-tinted shadows instead of pure gray.

## Bad — do not do this

`design-hue-consistency-bad`

```tsx
export function HueConsistencyBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-primary rounded-lg p-4">
        <div
          className="bg-card rounded-lg p-4"
          style={{
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)',
            border: '1px solid rgba(0, 0, 0, 0.1)',
          }}
        >
          <h3 className="font-semibold text-foreground mb-2">Card Title</h3>
          <p className="text-sm text-muted-foreground">
            The gray/black shadow and border look harsh against the blue background.
          </p>
        </div>
        <p className="text-xs text-primary-foreground/70 mt-4">
          Pure gray shadows clash with colored background
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Neutral shadows on colored background look harsh
      </p>
    </div>
  );
}
```

## Good — do this

`design-hue-consistency-good`

```tsx
export function HueConsistencyGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-primary rounded-lg p-4">
        <div
          className="bg-card rounded-lg p-4"
          style={{
            boxShadow: '0 4px 12px rgba(30, 64, 175, 0.35)',
            border: '1px solid rgba(30, 64, 175, 0.15)',
          }}
        >
          <h3 className="font-semibold text-foreground mb-2">Card Title</h3>
          <p className="text-sm text-muted-foreground">
            The blue-tinted shadow and border harmonize with the background.
          </p>
        </div>
        <p className="text-xs text-primary-foreground/70 mt-4">
          Blue-tinted shadows blend naturally
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Shadows tinted toward background hue - cohesive look
      </p>
    </div>
  );
}
```

## References

- [Color Theory](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)