๐Ÿงฐ Boรฎte ร  Outils Web

Le couteau suisse du dรฉbutant. Simple, honnรชte, et sans prise de tรชte.

๐ŸŽจ Couleurs

Choisir une couleur et obtenir ses diffรฉrents formats.

๐ŸŽฏ Sรฉlecteur de couleur

#855cd6
HEX
#855cd6
RGB
rgb(133, 92, 214)
HSL
hsl(260, 58%, 60%)
โš ๏ธ 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

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

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
10px0.625remPetit texte, labels
12px0.75remTexte secondaire
14px0.875remTexte compact
16px1remTexte par dรฉfaut
18px1.125remTexte lisible
20px1.25remSous-titres
24px1.5remTitres h3
32px2remTitres h2
48px3remTitres h1

๐Ÿ“ Gรฉnรฉrateur de texte

Du faux texte pour remplir tes maquettes.

โœ๏ธ Lorem Ipsum

Rรฉsultat :
โš ๏ธ 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

URL :
https://placehold.co/400x300
Code HTML :
<img src="https://placehold.co/400x300" alt="Image placeholder">
Aperรงu :
Preview
โš ๏ธ 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
& &amp; Esperluette (et commercial)
< &lt; Infรฉrieur ร  (chevron ouvrant)
> &gt; Supรฉrieur ร  (chevron fermant)
" &quot; Guillemet double
' &apos; Apostrophe
  &nbsp; Espace insรฉcable
© &copy; Copyright ยฉ
® &reg; Marque dรฉposรฉe ยฎ
&trade; Trademark โ„ข
&euro; Euro โ‚ฌ
&larr; Flรจche gauche โ†
&rarr; 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
<!-- HTML --> <nav> <a href="index.html">Accueil</a> <a href="apropos.html">ร€ propos</a> <a href="contact.html">Contact</a> </nav> <!-- CSS --> <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

โš ๏ธ 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 :