Help & Documentation

Learn how to use every feature of Waripixel Toolbox.

Color Picker

The Color Picker is your starting point. Click the color preview or the native color picker button to choose any color, or type directly into the HEX input field.

Color formats: Values update in real time across HEX, RGB, HSL, and HSV.

CSS Variables: A ready-to-copy CSS snippet is generated automatically for your picked color.

Shades & Tints: Nine variations from dark to light — click any swatch to copy its HEX.

Color Harmonies: Complementary, Analogous, and Triadic schemes are computed automatically.

Color Details: Shows luminance, perceived brightness, temperature (warm/cool), nearest CSS color name, and contrast ratios against black and white. Use Save Color to store it, or Check Contrast to send it straight to the Contrast Checker.

Color Names

Browse over 140 CSS named colors. Filter by family (Red, Blue, Green, etc.) or search by name or HEX value. Click a card to copy its HEX.

Color Chart

A visual reference of color families — switch between All, Basic, Web-safe, Grayscale, Pastels, Neon, Earth Tones, and UI Colors. Click any swatch to copy its HEX.

Color Palettes

Curated palettes from Tailwind, Material Design, Flat UI, brand colors, gradients, and more. Click individual swatches to copy their HEX, or use the export buttons to copy an entire palette as a list, CSS custom properties, or a Tailwind config object.

Tailwind Palette Generator

Pick a base color and instantly generate a full 50–950 Tailwind shade scale. Click any swatch to copy its HEX, or use the export buttons to copy the whole scale as a Tailwind config object or as CSS custom properties.

Contrast Checker

Check WCAG 2.1 color accessibility. Set the foreground (text) and background colors using the large square swatches — click a square to open the picker, or type a HEX directly into the field below it. Use the ↕ button to quickly swap foreground and background.

WCAG levels explained:

  • AA Normal Text — requires a 4.5:1 minimum contrast ratio
  • AA Large Text — requires 3:1 (text 18pt+ or 14pt bold)
  • AAA Normal Text — requires 7:1 (enhanced accessibility)
  • AAA Large Text — requires 4.5:1

The Live Preview shows realistic heading, body text, button, and card examples using your chosen colors.

Color Mixer

Blend two colors by dragging the gradient slider — the track shows the full gradient between Color A and Color B, and the thumb reflects the exact mixed color at your chosen ratio. The 10-Step Blend shows eleven equidistant steps, and the Gradient Preview gives you a ready-to-copy CSS linear-gradient.

Image Tools

Upload any image by dragging it onto the drop zone or clicking to browse. Once it loads:

Cropping: Drag over the image to draw a crop area. Use the aspect ratio buttons to lock proportions, type pixel values directly into the W/H fields, click ↕ to swap width and height, or use the lock button to lock/unlock the ratio.

Rotation: Use the Rotate bar to spin your crop selection — click ±1°, ±15°, ±90° to step, or type any angle from -180° to 180°. The crop box rotates visually, and Download Crop saves the rotated selection as a PNG.

Color Picking: Click anywhere on the image outside the crop box to sample that pixel's color.

Palette Extraction: The eight most dominant colors are extracted automatically on upload, ready to download.

Image Inspector: Shows file name, size, dimensions, and any available EXIF metadata — copyable or downloadable as JSON.

Remove Background

Upload an image and its background is removed automatically, right in your browser — no file is ever uploaded to a server. Choose a solid background color (or leave it transparent) and download the result as a PNG.

Saved Colors

Click Save Color in the Color Picker's Details card, or Save on any sampled image color, to store it locally — it'll persist across browser sessions. Use Export JSON to download your collection, or Clear All to start fresh.

💡 Tips

  • HEX inputs accept values with or without the # prefix.
  • Click any color swatch anywhere in the app to copy its HEX to your clipboard.
  • Waripixel Toolbox stores your theme, language, and saved colors in your browser's localStorage — nothing is ever sent to a server.
  • The toolbox works fully offline once it has loaded.

Sélecteur de couleur

Le Sélecteur de couleur est votre point de départ. Cliquez sur l'aperçu de couleur ou le bouton de sélection natif pour choisir n'importe quelle couleur, ou saisissez directement une valeur dans le champ HEX.

Formats de couleur : Les valeurs se mettent à jour en temps réel pour HEX, RGB, HSL et HSV.

Variables CSS : Un extrait CSS prêt à copier est généré automatiquement pour la couleur choisie.

Nuances & Teintes : Neuf variations du foncé au clair — cliquez sur une teinte pour copier son HEX.

Harmonies de couleurs : Les schémas Complémentaire, Analogue et Triadique sont calculés automatiquement.

Détails de la couleur : Affiche la luminance, la luminosité perçue, la température (chaude/froide), le nom CSS le plus proche et les ratios de contraste vis-à-vis du noir et du blanc. Utilisez Sauvegarder pour la stocker, ou Vérifier le contraste pour l'envoyer directement au Vérificateur de contraste.

Noms de couleurs

Parcourez plus de 140 couleurs CSS nommées. Filtrez par famille (Rouge, Bleu, Vert, etc.) ou recherchez par nom ou valeur HEX. Cliquez sur une carte pour copier son HEX.

Charte des couleurs

Un référentiel visuel des familles de couleurs — basculez entre Toutes, Basiques, Web-safe, Niveaux de gris, Pastels, Néon, Tons terreux et Couleurs UI. Cliquez sur une teinte pour copier son HEX.

Palettes de couleurs

Palettes sélectionnées depuis Tailwind, Material Design, Flat UI, couleurs de marque, dégradés et plus encore. Cliquez sur une teinte pour copier son HEX, ou utilisez les boutons d'export pour copier une palette entière sous forme de liste, de variables CSS ou d'un objet de configuration Tailwind.

Générateur de palette Tailwind

Choisissez une couleur de base et générez instantanément une échelle Tailwind complète de 50 à 950. Cliquez sur une teinte pour copier son HEX, ou utilisez les boutons d'export pour copier toute l'échelle sous forme de configuration Tailwind ou de variables CSS.

Vérificateur de contraste

Vérifiez l'accessibilité des couleurs selon WCAG 2.1. Définissez le premier plan (texte) et l'arrière-plan via les grands carrés — cliquez sur un carré pour ouvrir le sélecteur, ou saisissez un HEX dans le champ en dessous. Utilisez le bouton ↕ pour inverser rapidement les deux couleurs.

Les niveaux WCAG expliqués :

  • AA Texte normal — ratio minimum de 4,5:1
  • AA Texte large — ratio de 3:1 (texte 18pt+ ou 14pt gras)
  • AAA Texte normal — ratio de 7:1 (accessibilité renforcée)
  • AAA Texte large — ratio de 4,5:1

L'aperçu en direct présente des exemples réalistes de titre, texte courant, bouton et carte avec vos couleurs choisies.

Mélangeur de couleurs

Mélangez deux couleurs en faisant glisser le curseur de dégradé — la piste affiche le dégradé complet entre la Couleur A et la Couleur B, et le bouton reflète la couleur exacte selon votre ratio. Le Dégradé en 10 étapes montre onze étapes équidistantes, et l'Aperçu du dégradé fournit un linear-gradient CSS prêt à copier.

Outils image

Importez une image en la glissant sur la zone de dépôt ou en cliquant pour la parcourir. Une fois chargée :

Recadrage : Faites glisser sur l'image pour tracer une zone de recadrage. Utilisez les boutons de ratio pour verrouiller les proportions, saisissez des valeurs en pixels dans les champs L/H, cliquez sur ↕ pour échanger largeur et hauteur, ou utilisez le cadenas pour verrouiller/déverrouiller le ratio.

Rotation : Utilisez la barre Rotation pour faire pivoter votre sélection — cliquez sur ±1°, ±15°, ±90° ou saisissez n'importe quel angle entre -180° et 180°. La zone de recadrage pivote visuellement, et Télécharger le recadrage enregistre la sélection pivotée en PNG.

Pipette : Cliquez n'importe où sur l'image, hors de la zone de recadrage, pour échantillonner la couleur de ce pixel.

Extraction de palette : Les huit couleurs dominantes sont extraites automatiquement à l'import, prêtes à être téléchargées.

Inspecteur d'image : Affiche le nom du fichier, la taille, les dimensions et les métadonnées EXIF disponibles — copiables ou téléchargeables en JSON.

Suppression de fond

Importez une image et son arrière-plan est supprimé automatiquement, directement dans votre navigateur — aucun fichier n'est jamais envoyé à un serveur. Choisissez une couleur de fond unie (ou laissez-le transparent) et téléchargez le résultat en PNG.

Couleurs sauvegardées

Cliquez sur Sauvegarder dans la carte Détails du Sélecteur, ou sur Sauvegarder pour toute couleur échantillonnée depuis une image, pour la stocker localement — elle persistera entre vos sessions de navigation. Utilisez Exporter JSON pour télécharger votre collection, ou Tout effacer pour repartir de zéro.

💡 Conseils

  • Les champs HEX acceptent les valeurs avec ou sans le préfixe #.
  • Cliquez sur n'importe quelle teinte dans l'application pour copier son HEX dans le presse-papiers.
  • Waripixel Toolbox stocke votre thème, votre langue et vos couleurs sauvegardées dans le localStorage de votre navigateur — rien n'est jamais envoyé à un serveur.
  • L'application fonctionne entièrement hors ligne une fois chargée.