🧰 Boîte à Outils Web — Le couteau suisse du débutant

🎨 Couleurs

Choisir une couleur et obtenir ses différents formats.

🎯 Sélecteur de couleur

Choisis ta couleur :

Aperçu :

#855cd6

HEX

#855cd6

RGB

rgb(133, 92, 214)

HSL

hsl(260, 58%, 60%)

Ou entre un code HEX :

⚠️ Limites de cet outil

Pas de palettes générées — Il ne propose pas de couleurs complémentaires ou harmonieuses. Pour ça, utilise Coolors ou Adobe Color.
Pas de transparence (alpha) — Pour les couleurs avec transparence (rgba, hsla), tu devras ajouter le 4e paramètre toi-même.
Conversion approximative — HSL est arrondi, ce qui peut donner de très légères variations.

👁️ Vérificateur de contraste

Vérifie si tes couleurs sont lisibles (accessibilité WCAG).

🔍 Test de contraste

Couleur du texte :

Couleur de fond :

Exemple de texte pour tester la lisibilité.

Petit texte aussi.

Ratio de contraste

12.6:1

Verdict WCAG

✅ AAA — Parfait !

⚠️ Limites de cet outil

Seulement 2 couleurs — Ne teste pas les contrastes sur images de fond, dégradés, ou texte sur plusieurs fonds.
Pas de simulation daltonisme — Pour ça, utilise Toptal Colorblind Filter.
WCAG simplifié — Il existe des critères plus fins (texte large, non-texte, etc.) sur WebAIM.

📏 Convertisseur d'unités

Convertir entre px, rem, em, et pourcentages.

🔄 Conversion px ↔ rem

Pixels (px) :

Rem :

Taille de base (root) : px Par défaut, les navigateurs utilisent 16px.

⚠️ Limites de cet outil

rem ≠ em — rem est relatif à la racine (html), em est relatif au parent. Cet outil ne gère que rem.
Base fixe — En vrai, la taille de base peut être modifiée par l'utilisateur dans ses paramètres navigateur. Ce calcul suppose une base standard.
Pas de vw/vh — Les unités viewport (vw, vh) dépendent de la taille d'écran, impossible à calculer statiquement.

📊 Tableau de référence rapide

Base : 16px

px	rem	Usage courant
10px	0.625rem	Petit texte, labels
12px	0.75rem	Texte secondaire
14px	0.875rem	Texte compact
16px	1rem	Texte par défaut
18px	1.125rem	Texte lisible
20px	1.25rem	Sous-titres
24px	1.5rem	Titres h3
32px	2rem	Titres h2
48px	3rem	Titres h1

📝 Générateur de texte

Du faux texte pour remplir tes maquettes.

✍️ Lorem Ipsum

Type :

Quantité :

Résultat :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

⚠️ Limites de cet outil

Toujours le même texte — Ce générateur utilise un Lorem classique, pas de variations aléatoires sophistiquées.
Latin uniquement — Pour du faux texte en français, essaie lipsum.com ou pour du fun Bacon Ipsum.
Pas de HTML — Le texte est brut. Si tu veux des <p> autour, ajoute-les toi-même.

🖼️ Images placeholder

Des URLs d'images factices pour tes maquettes.

📐 Générateur d'URL

Largeur (px) :

Hauteur (px) :

Service :

URL :

https://placehold.co/400x300

Code HTML :

Aperçu :

⚠️ Limites de cet outil

Dépendance externe — Ces services peuvent être lents, indisponibles, ou fermer un jour. Ne les utilise pas en production !
Pas de texte custom — Pour du texte sur l'image (comme "400x300"), seul Placehold.co le fait par défaut.
Images aléatoires — Picsum et les autres donnent des images différentes à chaque fois. Si tu veux la même, ajoute ?random=1 à l'URL.

🔣 Entités HTML

Les caractères spéciaux et comment les écrire en HTML.

📋 Caractères courants

Caractère	Code	Description
&	`&`	Esperluette (et commercial)
<	`<`	Inférieur à (chevron ouvrant)
>	`>`	Supérieur à (chevron fermant)
"	`"`	Guillemet double
'	`'`	Apostrophe
	` `	Espace insécable
©	`©`	Copyright ©
®	`®`	Marque déposée ®
™	`™`	Trademark ™
€	`€`	Euro €
←	`←`	Flèche gauche ←
→	`→`	Flèche droite →
♥	`&hearts;`	Cœur ♥
✓	`&check;`	Coche ✓

⚠️ Limites de cet outil

Liste non exhaustive — Il existe des centaines d'entités HTML. Pour la liste complète : Spécification HTML.
UTF-8 suffit souvent — Avec un encodage UTF-8 (ce que tu as normalement), tu peux écrire directement €, ©, →, etc. Les entités sont surtout utiles pour &, <, > qui ont un sens en HTML.
Emojis ≠ entités — Les emojis (🎉, 😀, etc.) sont du texte Unicode, pas des entités HTML. Tu les copies-colles directement.

📋 Snippets

Bouts de code prêts à copier-coller.

🏗️ Structure HTML de base

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mon site</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Bienvenue</h1> <p>Contenu ici.</p> </body> </html>

🎨 CSS de base

style.css

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } h1, h2, h3 { margin-bottom: 1rem; } p { margin-bottom: 1rem; } a { color: #0066cc; } img { max-width: 100%; height: auto; }

🧭 Navigation simple

HTML + CSS

<nav> <a href="index.html">Accueil</a> <a href="apropos.html">À propos</a> <a href="contact.html">Contact</a> </nav>  <style> nav { background: #333; padding: 1rem; } nav a { color: white; text-decoration: none; margin-right: 1.5rem; } nav a:hover { text-decoration: underline; } </style>

📱 Responsive basique

Media query

/* Mobile first: styles par défaut pour petit écran */ .container { padding: 1rem; } /* Écran moyen (tablette) */ @media (min-width: 768px) { .container { padding: 2rem; max-width: 720px; margin: 0 auto; } } /* Grand écran (desktop) */ @media (min-width: 1024px) { .container { max-width: 960px; } }

⚠️ Limites de ces snippets

Minimalistes — Ce sont des points de départ, pas des solutions complètes. Adapte-les à ton besoin.
Pas de frameworks — Pas de Bootstrap, Tailwind, etc. C'est du CSS vanilla, plus simple à comprendre mais plus de travail pour des layouts complexes.
Pas de JavaScript — Ces snippets sont HTML/CSS uniquement. Pour de l'interactivité, il faudra ajouter du JS.

✅ Validateur HTML

Vérifie si ton code HTML est correct.

🔍 Vérification basique

Colle ton code HTML :

⚠️ GROSSES limites de cet outil

Validation très basique — Ce validateur vérifie seulement si les balises sont bien fermées et imbriquées. C'est LOIN d'une validation complète.
Pas de vraie validation W3C — Pour une validation sérieuse, utilise le validateur officiel du W3C.
Pas de vérification sémantique — Il ne vérifie pas si ton HTML a du sens (ex: un <li> en dehors d'un <ul>).
Pas de vérification des attributs — Les attributs invalides ou mal formés ne sont pas détectés.
Côté client uniquement — Ton code n'est pas envoyé à un serveur, c'est bien pour la vie privée mais ça limite ce qu'on peut vérifier.

🔗 Vrais validateurs (recommandés)

Pour une validation sérieuse, utilise ces outils professionnels :

W3C Markup Validator — Le validateur officiel HTML
W3C CSS Validator — Pour valider ton CSS
WAVE — Pour l'accessibilité
PageSpeed Insights — Performance globale