---
title: "Colors"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Frutjam color system built on semantic tokens. WCAG AA/AAA compliant, dark mode aware, CSS custom properties, Tailwind CSS v4 compatible."
url: https://frutjam.com/fr/docs/colors
---

# Color System

 Frutjam uses CSS custom properties as design tokens for all colors. Every color is defined per theme and automatically works with Tailwind CSS utility classes — no extra configuration needed. CSS-only, no JavaScript required. WCAG AA contrast guaranteed on every color pair, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

## Color Names

Frutjam defines the following semantic color roles. Each color has a matching `on-{color}` token for accessible foreground text.

**WCAG AA Contrast Guaranteed.** Every `on-{color}` pair is hand-tuned in OKLCH to pass WCAG AA contrast requirements. Unlike libraries that compute foreground colors automatically, Frutjam gives you explicit, verified pairs — so your components are accessible by design, not by chance.

| Couleur   | Token               | Purpose                      |
| --------- | ------------------- | ---------------------------- |
| base      | `--color-base`      | Page background              |
| neutral   | `--color-neutral`   | Surfaces, sidebars, overlays |
| primary   | `--color-primary`   | Primary brand color          |
| secondary | `--color-secondary` | Secondary brand color        |
| accent    | `--color-accent`    | Accent / highlight color     |
| info      | `--color-info`      | Informational messages       |
| success   | `--color-success`   | Success states               |
| warning   | `--color-warning`   | Warning states               |
| error     | `--color-error`     | Error and destructive states |

## Color Utility Classes

All Frutjam colors work with any Tailwind CSS color utility. Replace `{color}` with any color name from the table above.

| Classe                | Description            |
| --------------------- | ---------------------- |
| `bg-{color}`          | Background color       |
| `text-{color}`        | Text color             |
| `border-{color}`      | Border color           |
| `ring-{color}`        | Ring color             |
| `outline-{color}`     | Outline color          |
| `shadow-{color}`      | Shadow color           |
| `fill-{color}`        | SVG fill color         |
| `stroke-{color}`      | SVG stroke color       |
| `decoration-{color}`  | Text decoration color  |
| `caret-{color}`       | Input caret color      |
| `placeholder-{color}` | Placeholder text color |
| `divide-{color}`      | Divider border color   |

```html
<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>
```

#### Opacity Modifier

Control color opacity with the `/{value}` modifier, just like any Tailwind color.

```html
<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>
```

## Theme CSS Variables

These are the root tokens you define when creating a custom theme. All other color tokens are computed automatically from these.

| CSS Variable           | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `--scheme-color`       | Color scheme: `light` or `dark`                 |
| `--border-radius`      | Base border radius for components               |
| `--color-base`         | Page background color                           |
| `--color-on-base`      | Default text color on base background           |
| `--color-neutral`      | Neutral surface color                           |
| `--color-on-neutral`   | Text color on neutral surfaces                  |
| `--color-primary`      | Primary brand color                             |
| `--color-on-primary`   | Text color on primary backgrounds               |
| `--color-secondary`    | Secondary brand color                           |
| `--color-on-secondary` | Text color on secondary backgrounds             |
| `--color-accent`       | Accent color                                    |
| `--color-on-accent`    | Text color on accent backgrounds                |
| `--color-info`         | Info color                                      |
| `--color-on-info`      | Text color on info backgrounds                  |
| `--color-success`      | Success color                                   |
| `--color-on-success`   | Text color on success backgrounds               |
| `--color-warning`      | Warning color                                   |
| `--color-on-warning`   | Text color on warning backgrounds               |
| `--color-error`        | Error color                                     |
| `--color-on-error`     | Couleur du texte sur les arrière-plans d'erreur |

## Jetons de couleur calculés

Frutjam calcule automatiquement ces jetons à partir des variables de votre thème racine — vous ne les définissez pas manuellement. Ils sont disponibles pour une utilisation dans du CSS personnalisé.

### Échelle (50-950)

Chaque couleur génère une échelle de teinte/teinte complète en 11 étapes. Remplacez `{color}` par n'importe quel nom de couleur.

| CSS Variable          | Description                                     |
| --------------------- | ----------------------------------------------- |
| `--color-{color}-50`  | Teinte la plus claire (mélange de couleurs 4%)  |
| `--color-{color}-100` | Teinte très claire                              |
| `--color-{color}-200` | Teinte claire                                   |
| `--color-{color}-300` | Teinte moyennement claire                       |
| `--color-{color}-400` | Légère teinte                                   |
| `--color-{color}-500` | Couleur de base (identique à `--color-{color}`) |
| `--color-{color}-600` | Légère ombre                                    |
| `--color-{color}-700` | Teinte moyenne                                  |
| `--color-{color}-800` | Nuance foncée                                   |
| `--color-{color}-900` | Teinte très foncée                              |
| `--color-{color}-950` | Nuance la plus foncée                           |

### Doux et léger. Actif

Variantes sensibles à l'état pour les éléments interactifs, s'adaptant automatiquement aux thèmes clairs et sombres.

| CSS Variable              | Description                                                                        |
| ------------------------- | ---------------------------------------------------------------------------------- |
| `--color-{color}-soft`    | Fond teinté subtil pour des variantes douces                                       |
| `--color-on-{color}-soft` | Couleur du texte à utiliser sur des arrière-plans mous                             |
| `--color-{color}-active`  | Nuance assombrie/éclaircie pour les états de vol stationnaire et actif             |
| `--color-body`            | Couleur du corps du texte calculé (légèrement adoucie par rapport à `sur la base`) |

## Exemple de thème personnalisé

Remplacez les jetons racine pour créer un thème personnalisé. Frutjam calcule automatiquement toutes les échelles et tous les états.

```css
@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}
```