couleur

color

convert

conversion

conversion couleur

rgb

hex

hsv

rvb

hexa

tsl

hsb

script

javascript

php

css

Des outils de conversion pour les couleurs rgb ou hexadécimales

CONVERSION DE COULEURS

script : Color v1.0
langage : javascript
catégorie : fragment
usage : Des outils de conversion pour les couleurs rgb ou hexadécimales
tags : technique

Concept

L'objet javascript Color a pour objectif de faciliter la manipulation des couleurs. Il fournit une série d'outils de conversion prêts à l'emploi, pour ne plus avoir à se casser la tête avec les codes rgb, ou hexadécimaux.

Démo

Vous pouvez entrer dans le champ ci-dessous un code couleur de votre choix (plusieurs syntaxes possibles, présentées plus bas), ou bien cliquer sur le point d'interrogation pour en générer un aléatoirement.
Color convertira ce code selon quatre syntaxes différentes, que vous reconnaîtrez.

Code

Commençons par charger le script, en insérant la balise suivante dans la page :

<script src="Color.min.js" type="text/javascript"></script>

Ensuite, pour traiter une nouvelle couleur, on commence par la déclarer, comme suit :

var col = new Color( code_couleur );

Comme mentionné plus haut, Color reconnaît plusieurs types de syntaxe. Ainsi, les déclarations suivantes sont équivalentes :

var col = new Color( "#3264c8" );
var col = new Color( "rgb(50,100,200)" );
var col = new Color( [ 50, 100, 200 ] );
var col = new Color( 50, 100, 200 );

A partir de là, vous pourrez obtenir des équivalents de la couleur que vous avez créée, grâce aux méthodes suivantes :

col.hex();    // "#3264c8"
col.hexArr(); // [ "32", "64", "c8" ]
col.rgb();    // "rgb(50,100,200)"
col.rgbArr(); // [ 50, 100, 200 ]

Téléchargement

Vous trouverez dans ce zip deux versions du script : l'une minifiée (868 octets), et l'autre commentée. 

compatibilité :

(autres navigateurs non testés)

technique

Commentaires