Convertisseur de couleurs — HEX, RGB, HSL et alpha
Convertissez une couleur sRGB prise en charge en HEX, RGB et HSL avec alpha. Vérifiez les arrondis : ce n’est ni un analyseur CSS complet ni une garantie de correspondance entre écrans.
Convertir une couleur
- Saisissez un HEX avec # ou une fonction rgb/rgba/hsl/hsla prise en charge. L’exemple remplit #33669980 sans convertir ; utilisez le point décimal.
- Cliquez sur Convertir. La couleur non arrondie et l’alpha indépendant produisent chaque format séparément ; toute modification retire l’ancien résultat.
- Copiez un code ou les trois lignes. Consultez les indications d’arrondi et d’octet alpha ; l’aperçu n’est pas calibré.
Canaux et syntaxe
HEX3/4 double les chiffres ; HEX6/8 utilise des octets, alpha en dernier. RGB accepte des nombres de 0 à 255 ou des pourcentages de 0 à 100 %. La syntaxe moderne utilise espaces et barre oblique ; l’ancienne utilise des virgules sans mélange de nombres et pourcentages.
HSL utilise des degrés, éventuellement suivis de deg, et des pourcentages de saturation et de clarté. La teinte est cyclique ; la clarté HSL n’est pas la luminance relative. Le calcul utilise le sRGB encodé.
Alpha est indépendant de RGB : un alpha nul n’efface pas la couleur et ne la mélange pas à un fond. En HEX8, 0.5 devient l’octet 128, soit 128/255.
Avec des canaux RGB égaux, H=0 et S=0 par convention ; la teinte initiale ne peut être retrouvée de façon unique. Avec un chroma non nul, la teinte mathématique est conservée sans seuil de tolérance.
Exemples et arrondis
#33669980 contient les octets 51, 102, 153 et alpha 128/255. Les canaux encodés 0.2, 0.4, 0.6 donnent HSL 210°, 50 %, 40 % ; l’alpha fonctionnel est arrondi à 0.50196078.
hsl(210 100% 50% / .5) donne RGB 0, 127.5, 255. Les valeurs à mi-chemin du canal et de l’alpha sont arrondies vers le haut : HEX #0080FF80, tandis que la fonction conserve alpha 0.5.
rgb(17 34 51 / 99.999999%) conserve alpha fonctionnel 0.99999999, mais l’octet est arrondi à FF : #112233FF. Avec 0.000001 %, la fonction conserve 0.00000001 et l’octet devient 00.
Limites
Avant suppression des espaces, la saisie accepte 256 unités UTF-16 et 16 caractères ASCII par nombre. RGB numérique et alpha numérique acceptent 8 décimales ; pourcentages et HSL, 6. Pas d’exposants ; teinte entre ±1000000°. Les valeurs hors plage sont refusées.
Les noms, transparent, currentColor, none, commentaires, variables, calculs, autres espaces et unités angulaires ne sont pas pris en charge. HSL exige des pourcentages S/L. Certaines formes exclues sont valides en CSS.
HEX arrondit à l’octet le plus proche, les valeurs à mi-chemin vers le haut ; RGB et alpha fonctionnel utilisent jusqu’à 8 décimales, HSL jusqu’à 6. Une teinte arrondie à 360 devient 0. Le retour exact n’est pas garanti.
Pas de conversion ICC, CMYK ou à large gamme, de classification du contraste ni de certification de correspondance. L’aperçu illustre le RGB généré ; la clarté HSL n’évalue pas l’accessibilité.
Confidentialité
Le calcul se fait dans le navigateur sans ajout de téléversement, compte, historique, journal de saisie ou lien contenant la couleur. La copie est demandée par l’utilisateur ; en cas d’échec, un texte en lecture seule est proposé. Les autres services suivent les politiques du site.
Questions fréquentes
Sources et méthode
CSS Color 4 décrit les formats et calculs servant de référence à ce convertisseur limité.
- W3Cw3.orgNotation HEXNombre de chiffres, ordre des canaux et alpha en hexadécimal.
- W3Cw3.orgFonctions RGBSyntaxe des canaux RGB et de l’alpha.
- W3Cw3.orgFonctions HSLSyntaxe de la teinte, de la saturation et de la clarté.
- W3Cw3.orgValeurs alphaAlpha représente l’opacité indépendamment des canaux de couleur.
- W3Cw3.orgDe HSL à RGBConversion entre HSL et composantes RGB encodées.
- W3Cw3.orgComposantes sans effetQuand une composante est sans effet, notamment la teinte neutre.
Ce convertisseur applique un sous-ensemble limité et ses propres règles d’arrondi, pas tout CSS.
Outils associés
SVG en PNG
Convertissez un fichier SVG local ou du code collé en PNG, avec dimensions définies, transparence et polices intégrées.
Ouvrir l’outil — SVG en PNGGénérateur de filtres CSS
Ordonnez et répétez les effets CSS, comparez un exemple et copiez la déclaration exacte.
Ouvrir l’outil — Générateur de filtres CSSCalculateur de taille de police fluide
Définissez la taille de police pour deux largeurs de fenêtre. Copiez le CSS relatif à la racine et consultez le modèle calculé avec les mêmes coefficients exportés.
Ouvrir l’outil — Calculateur de taille de police fluideGénérateur de bouton CSS
Personnalisez les états d’un bouton natif, vérifiez le focus clavier et copiez le HTML et le CSS.
Ouvrir l’outil — Générateur de bouton CSSGénérateur CSS de border-radius
Modifiez huit rayons, prévisualisez un cadre et copiez le CSS en pixels ou pourcentages.
Ouvrir l’outil — Générateur CSS de border-radiusGénérateur CSS Grid
Créez un exemple CSS Grid avec pistes, placement et zones nommées. Prévisualisez-le, copiez le CSS ou le HTML et téléchargez l’exemple complet.
Ouvrir l’outil — Générateur CSS GridGénérateur de boîtes flexibles CSS
Créez un exemple Flexbox avec des contrôles de conteneur et d'élément, des axes de mise en page explicites, une correspondance CSS et HTML et un téléchargement local d'exemple complet.
Ouvrir l’outil — Générateur de boîtes flexibles CSSGénérateur CSS d’ombres de texte
Créez des ombres de texte ordonnées, prévisualisez du texte brut et copiez le CSS exact.
Ouvrir l’outil — Générateur CSS d’ombres de texteGénérateur de transformation CSS
Composez des transformations CSS 2D répétables, modifiez px ou la traduction et l'origine en pourcentage, inspectez une boîte de référence et copiez les déclarations actuelles exactes.
Ouvrir l’outil — Générateur de transformation CSSGénérateur d’ombres CSS
Créez des couches box-shadow ordonnées, prévisualisez et copiez le code CSS.
Ouvrir l’outil — Générateur d’ombres CSSFiligrane sur image
Ajoutez du texte ou un logo aux images, vérifiez les résultats et téléchargez les fichiers individuels ou un ZIP.
Ouvrir l’outil — Filigrane sur imageGénérateur de dégradés CSS
Créez des dégradés linéaires ou radiaux avec couleurs, opacité et points réglables.
Ouvrir l’outil — Générateur de dégradés CSSImage en texte (OCR)
Reconnaissez le texte imprimé de PNG ou JPEG locaux, choisissez la langue et vérifiez ou corrigez le résultat avant de le copier ou télécharger.
Ouvrir l’outil — Image en texte (OCR)Lecteur de QR depuis une image
Lisez un QR code depuis un PNG ou JPEG local et examinez le texte ou les octets sans ouvrir de lien.
Ouvrir l’outil — Lecteur de QR depuis une imageVérificateur de contraste des couleurs
Comparez les couleurs du premier plan et de l’arrière-plan, ajustez l’opacité et vérifiez les seuils numériques WCAG pour le texte et les détails essentiels de l’interface.
Ouvrir l’outil — Vérificateur de contraste des couleursCalculateur de taille d’impression et de résolution
Calculez la taille d’impression, les pixels nécessaires et la résolution effective avec marges ou recadrage.
Ouvrir l’outil — Calculateur de taille d’impression et de résolutionCalculateur de rapport largeur/hauteur
Calculez le rapport largeur/hauteur ou de nouvelles dimensions en pixels en fixant un seul côté.
Ouvrir l’outil — Calculateur de rapport largeur/hauteurCompresseur d’images
Essayez d’adapter un JPEG, PNG ou WebP à une taille de fichier cible, avec résultat mesuré et réduction facultative des dimensions.
Ouvrir l’outil — Compresseur d’imagesHEIC en JPG
Convertissez localement vos photos HEIC compatibles en JPG à pleine résolution, avec qualité et fond réglables, puis téléchargez les fichiers vérifiés seuls ou en ZIP.
Ouvrir l’outil — HEIC en JPGConvertisseur d’images
Convertissez des images PNG, JPEG et WebP localement, réglez transparence, fond et qualité, puis téléchargez les résultats.
Ouvrir l’outil — Convertisseur d’imagesCréer un collage photo
Disposez des photos locales en grille et téléchargez un PNG ou JPEG.
Ouvrir l’outil — Créer un collage photoPivoter et retourner des images
Faites pivoter ou retournez un lot local d’images statiques PNG, JPEG et WebP, puis vérifiez et téléchargez les résultats.
Ouvrir l’outil — Pivoter et retourner des imagesRecadrer une image
Recadrez un fichier JPEG, PNG ou WebP local au pixel près et téléchargez le résultat en PNG ou JPEG.
Ouvrir l’outil — Recadrer une imageRedimensionner une image
Redimensionnez une image JPG, PNG ou WebP en pixels ou en pourcentage, vérifiez et téléchargez le résultat.
Ouvrir l’outil — Redimensionner une image