Translating Hex Colors to HSL

Hi everyone,
I am pretty new to Dreamweaver, and web design in general, so forgive me if this seems to be a silly question.  I recently found out that it is possible to input colors using HSL notation.  This is amazing for me, using this I can choose colors much more effectively.  As a person trained in art and design, this notation makes much more sense to my brain than hex or even rgb notation.
However, there are many browsers that do not yet recognize HSL notation, not to mention the color sampling tools in Dreamweaver give hex code numbers.  What I am wondering is, is there an easy way to make Dreamweaver change the notation?  I know in other Adobe products you can change the units of measurement easily, for instance in Illustrator, you just have to type =px in a given field, to change the notation to pixels.  I haven't been able to find anything like this in Dreamweaver yet.
Basically, what I want to be able to do is input my colors using HSL notation, and change them to hex before publishing.  I also would like to be able to change them FROM hex to HSL when I sample colors, it just makes finding harmonious colors much more intuitive and faster for me.
Thanks,
Jason

As far as using any outside color pickers or similar, that's what I've been doing and I was hoping to do it all within Dreamweaver, quickly, without interrupting my 'flow'.
I know the HSL system well enough to be able to pretty much pick whatever color I need off the top of my head, without looking at anything or using a color picker at all, using only code.  It's important to me to be able to use that while designing.
Many people do not know that you can actually type in CSS code such as 'color: hsl(25,25,75)' and it is valid code that works (first image).   It just is not read by all browsers, hence the need to translate it to a notation they do read (Internet Explorer specifically is the one that won't play nice).
John's suggestion doesn't quite do it if the color is already coded as HSL, it won't change it to Hex on enter.  It does so if the color has not yet been established, or if it began as hex.  However, if I hover the eyedropper over the hsl color once the swatches are opened, then it gives me the hex value that I can type in for the translation (2nd image, it doesn't show the eyedropper in the screencap, but it's on the little color box).   It's a little more work than I would like, but it does do the job, and it is a fast translation without using an outside source.
I think my answer will be a combination of this method, and the hsl2rgb script found on one of the links that vw2 provided.  It says that it can translate all HSL to RGB in a CSS file.    My problem is, being as new as I am to web design, I am not 100% sure how to make the script work, but if it lets me code everything in HSL, then I will learn.
Thanks to everyone who has responded so far.  You have all been helpful.

Similar Messages

  • Gif images, pixels and hex colors

    I'm not a java developer, though I at least have attempted to learn it. This may be a strange place to ask this question but java keeps coming up in my search so what the heck!
    I am a highschool biology teacher-to-be and I am trying to design a lesson about DNA transcription and translation. I want the students to play a game where they take hex color codes (codons) and place a color card (amino acid) the hex code represents so that they build a big pixelated picture (the protein). I don't want to do the work of writing down the hex code for each and every pixel of the image, and was hoping there was some way to reveal as a list the hex color of each pixel in some sort of ordered fashion. I tried just dragging a gif file into a text program, but that didn't do it, ha!
    Any ideas?
    Thanks

    mport javax.imageio.*;
    import java.io.*;
    import java.awt.image.*;
    public class Test {
        public static void main(String[] args) throws Throwable{
         BufferedImage bi = ImageIO.read( new File( args[0] ) );
         for( int x = 0; x< bi.getWidth(); x++ ) {
             for( int y = 0; y< bi.getHeight(); y++ ) {
              System.out.print( Integer.toHexString( bi.getRGB( x, y ) ) + "," );
             System.out.println( "" );
    }Compile:
    javac Test.java
    run:
    java Test theNameOfImage.gif
    ??

  • Exporting correct Hex colors via scripting

    Hello all,
    I need to export the fillColor of a paragraph style via scripting.
    I can get the fillColor property of the paragraph style, and can also convert CMYK to Hex. However, I do realize that the color values shown in InDesign are in whatever Color Space the document is using.
    My question is, is there a native API to convert the color values to a web safe color value? If not, how do I go about mapping the colors?
    Additionally, I see that Adobe internally knows how to convert it to a proper hex color (screenshot attached - note the color property in the Export Tagging pane). If I cannot use some native API, is there a way to access the text in that pane?
    Thanks all, in advance!

    @DerKäse (btw. funny name) – there is an add() method for colors that will take a Object Color as argument.
    Use that for your purpose.
    Here an example for RGB:
    var myDoc = app.documents[0];
    var myColorName = "myNewRGBColor";
    if(!myDoc.swatches.itemByName(myColorName).isValid){
        var myNewColor = myDoc.colors.add(
                name:myColorName,
                colorValue:[255,255,0], //A bright yellow
                model:ColorModel.PROCESS,
                space:ColorSpace.RGB
    Here one for CMYK:
    var myDoc = app.documents[0];
    var myColorName = "myNewCMYKColor";
    if(!myDoc.swatches.itemByName(myColorName).isValid){
        var myNewColor = myDoc.colors.add(
                name:myColorName,
                colorValue:[0,0,100,0], //A bright yellow
                model:ColorModel.PROCESS,
                space:ColorSpace.CMYK
    Hope, that helps…
    Uwe

  • How to input hex colors in Indesign

    How do you make hex colors in Indesign CC? I cant seem to find that opti

    Check this: http://indesignsecrets.com/create-hexadecimal-color-swatches-in-indesign-for-interactive-d ocuments.php
    Edit: it seems to work just with CS6, not CC.

  • ILife crayons seem not to match the html hex color codes?

    anyone to confirm that apple did not care about matching html hex color conventions with its crayons. eg. honeydew crayon looks so much different from f0fff0

    I don't think those crayons are used for Web accurate colors. They're just descriptive if you're not particular about a specific shade.
    You might want to look at an extension of Apple's Color Picker here.
    http://mactheweb.com/software-review/enhancing-apples-colorpicker/

  • Please HELP! Hex Color Code MovieCLip

    Hi!
    How can i get the hex color code of a movieclip?
    Thanks a lot!

    To do it at runtime you can use something like the following, where mc representa whatever the instance name of your movieclip is...
    import flash.display.BitmapData;
    var bmd:BitmapData = new BitmapData(mc.width,mc.height);
    bmd.draw(mc);
    var pixelValue:uint = bmd.getPixel(1, 1); // specify a point where the color is
    trace(pixelValue.toString(16)); // this outputs the hex color value

  • Hex colors not the same

    I'm trying to change the background color of an xspf music player from black ( as in Roddy's tutorial ). I chose the Safe Hex colors, and wanted to try out a few to judge what they looked like.
    However: whatever code I write in, I ONLY get black or various shades of blue.
    Any ideas ?
    Thanks, Kay.

    Hallo Star-Fish, thanks for answering. This is the URL:
    http://www.innerspheresmusic.com/Audio_4.html
    I just checked on a Windows PC and the page is blank- not even a blue rectangle. In iWeb, it looks exactly the same as this page viewed on a mac; ie. the player hasn't properly established itself either.
    I'll post my HTML code here too- perhaps you can spot the faults:
    <object type=”application/x-shockwave-flash” width=”400” height=”170” quality=”high” bgcolor=”#FFFFFF”
    data=”http://www.innerspheresmusic.com/webmusic/xspf_player.swf?
    playlisturl=http://www.innerspheresmusic.com/webmusic/playlist.xspf&autoplay=1&volumelevel=50&timedisplay=1” />
    <param name=”movie”
    value=”http://www.innerspheresmusic.com/webmusic/xspf_player.swf?
    playlisturl=http://www.innerspheresmusic.com/webmusic/playlist.xspf&autoplay=1&volumelevel=50&timedisplay=1” />
    <param name=”bgcolor” value=”#FFFFFF” />
    </object>
    Kay.

  • Hex color of x app in awesome wm

    so in my awesome rc.lua i define my menu items as such
    ex:
    webbie = "arora -bg darkslategrey"
    fm = "worker"
    -- etc --
    then for menu items i do as
    web = {
    { "Browser", arora }
    however .. rather than use a defined color i would like to do summin as such
    webbie = "arora -bg "#222222""
    however that gives my rc.lua a headache and a crash back to default
    (hope this is enough info)
    i would like to set an x app to a hex color defined in my rc.lua unless there is a better way
    plz n ty for the help
    Last edited by VanillaFunk (2013-10-31 10:22:05)

    so i read up a bit more ... rgb.txt is depricated and i found the answer lies in setting xresources.  the command to put in xinitrc i get however when i define colors in .Xresources they dont seem to work for arora
    assuming i understand the wiki i should be able to define colors   i am not sure how much i wanna set as such as im very sure im not entirely understanding ... i would then :
    arora.background: #222222
    ill look more into this unless some one can explain better to me. sometimes i need to reread things 4 or 5 times and im not understanding the wiki as its not working
    https://wiki.archlinux.org/index.php/X_resources
    is what im reading through in case anyone is familiar with this page
    Last edited by VanillaFunk (2013-10-31 22:56:06)

  • Hex Color Element

    Is there a way in RTF to use an XML element for a background color in cell? The element is in a Hex format. I am looking to have the Level Name cell background color equal to the Hex color referenced in Level_Color.
    The XML file looks like this:
    <G_RISKLEVELNAME>
    <LEVEL_NAME>VH - H</LEVEL_NAME>
    <LEVEL_COLOR>#FF0000</LEVEL_COLOR>
    <G_RISKLEVELNAME>
    <LEVEL_NAME>H - M</LEVEL_NAME>
    <LEVEL_COLOR>#FFFF00</LEVEL_COLOR>
    Thanks in advance

    See here,
    http://winrichman.blogspot.com/2008/09/how-to-set-dynamic-color-based-on-xml.html

  • Illustrator CS4 hex color shifts again

    In  cs4 Illustrator on mac
    Color settings:North Amer/Internet
    Document Color Mode: RGB
    Proof Setup: Monitor RGB
    Proof Colors: Checked
    When I make a web safe colour in my color picker (example #0088CE) the number is fine when measured with the Digital Color meter. But once it is placed in the swatches pallette or on an object on the desktop the color shifts and consequently passed onto "save to web". Photoshop CS4 seems to be fine still though... What's up???

    Our small group just figured this out. Maybe because of the upgrade things get reset, I don't know for sure... but under EDIT>Assign Profile... my setting was for "Don't color manage tihs doc...". I didn't know this was here before and I dont understand why it wouldn't automatically change when choosing my "Color Settings" to 2.1 (or Internet/Web N. Amer). Soooooo, when you change it to 2.1 HERE TOO the proof colors check/uncheck works resulting the hex on screen to match the save for web output. Anyone in Adobe have a suggestion or instruction where this can all be changed in one place so it stays this way for us web peeps on all our documents? Sick of checking these settings yo.

  • JPEG, PNG, TGA, PDF changes hex color from PSD

    I work for a company where the CEO is very into brand colors. He has the hex values of all the branded colors memorized. One of the branded colors is blue ( hex: 0039a6 ). Obviously, if he looks at my psd and samples a the color, it will display 0039a6.
    However, whenever I save it out as a: jpg, tga, png, or pdf, the color's hex value will change to 1f419b. If he samples from one of those files, crisis! Wrong branded color!
    I've made 2 layers and filled with with both colors and as far as I can tell, they are exactly the same to the eye, even if they're overlapping. So I just want to know why this happens so I can explain myself if he ever runs over to my desk.
    Thanks!

    Oh right, this is happening with Photoshop and Illustrator, which is why is didn't post on an individual programs forums. I forgot to add that to my previous post. Do you recommend that I post in both the Photoshop and Illustrator sections?
    Edit: I did more tests. If I use the branded color 0039a6 in Illustrator and save it out as a png, tga, jpeg, pdf, and I then open one of those exported files in Photoshop, the hex value has changed.
    If I use the branded color in Photoshop, exporting a png keeps the color as the correct hex value. JPG doesn't, which makes sense due to compression. So now the question is, why are the files I'm exporting from Illustrator and opening in Photoshop showing different hex values. You would assume that the pngs should be okay from both Photoshop and Illustrator?

  • Hex colors in Indesign

    It would be really great if inDesign has teh ability for HGEX colors -- web safe etc.
    Especially because it seems I am now designing in indesign and trying to match an html5 widget to what i have done in indesign.
    sg

    See the following script by Harbs at In-Tools:
    http://in-tools.com/article/scripts-blog/hexadecimal-swatches-in-indesign/
    Uwe

  • Translating Lightroom color correcting to Final Cut pro...

    Hi all,
    My director friend has seen me color correct images in LR with grace and skill, and wants me to start doing color correction for his films. I have never used Final Cut Pro before, and wondered if the controls in Final Cut were similar to LR, if you could export and import between the two, and generally what the difference was between working with color in each. He has one of the RED cameras, which shoots in RAW, so I assume the different can't be too great. If anyone's proficient in both, the lowdown would be much appreciated!
    Thanks!
    Alec
    www.alecquig.com

    If he shoots with RED, why isn't he using RED's copy of Lightroom that's specifically for their cameras, and is provided free?  It's called RedCineX, I think.

  • Possible to supply a hex value to solid's color property?

    I know the AE Scripting Guide specifies that we have to supply an array of RGB values if we wish to change a solid's color property.  I'm just curious if it is possible to supply a hex value in lieu of an RGB array.  Does anybody have any experience with a work around?
    Thanks!

    Dan,
    Just wanted to add that I didn't realize your function assumed the hex color value would be passed in as `0xFFFFFF`.  My data was passed in as a string such as `FFFFFF`.  To fix, I just added one line:
    function hexToColor(theHex){
      theHex = parseInt(theHex,16);
      var r = theHex >> 16;
      var g = (theHex & 0x00ff00) >> 8;
      var b = theHex & 0xff;
      return [r/255,g/255,b/255];
    Thought this might help somebody who had the same data coming in question.  Thanks, again for the help.

  • How can I see the color of the hex value in a style sheet in DW CC

    I simply want to click on a hex value (#c1c1c1) in a style and see what color it is. I can't find it anywhere. Please help!

    RichieWhite wrote:
    I simply want to click on a hex value (#c1c1c1) in a style and see what color it is. I can't find it anywhere. Please help!
    I thought some of the answers above felt strange. Why wouldn't DW show you the color of a hex code when you clicked it. So I fiddled around a bit and as far as I can tell, if you click on a hex color within the css of a page (or a css file) the CSS Designer does show you the color.
    When I click on #AF070A in my .css file, it shows the color in the Properties sub window of the CSS Designer panel.
    You have to scroll down a touch, but it's there...

Maybe you are looking for

  • Hey, is it possible to load my Tracks, made by Logic Pro 8, to Logic Pro X ??? Thanks for help

    Hey, is it possible to load my tracks, made by Logic pro 8, to Logic pro X. Thanks for your help.

  • Adobe reader license agreement

    This agreement appears whenever I try to open a pdf with adobe reader 11.0. 02.  It has no "accept" button and can't be closed without closing the computer. I tried uninstalling and then reinstalling adobe reader 10, but the same thing is happening. 

  • Install the Netweaver Components 2004s

    Hi Looking for your help in 2004s installation in Windows 2003 How we are installing the Net weaver components in Netweaver 2004s?. I installed SAP XI 3.0 in SAP web As6.40 as separate component. But I would like to know how we are installing the Net

  • How to find database status

    how to find database status(average execution,reads,writes,block size)

  • Why can't I right-click to see settings?

    When I am using my cam and microphone on a website I cannot right-click to get to the settings manager. This started three days ago out of nowhere. What can I do? I am using Google Chrome, but I have tried it on IE and Firefox as well. I am using Win