Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    A "web-safe" palette contains 216 colors; each RGB component can only be 00, 33, 66, 99, CC, or FF (hex), or six possible choices. There are three components to an RGB color. Six cubed is 216, so there are only 216 possible colors. In concept these colors are displayed identically on different browsers and platforms, hence the name web-safe.

    This PHP script generates a (tiny) web-safe image showing all 216 web-safe colors.

    Requirements: PHP with GD library
    Time Required: 5 minutes

    1. Make a file called "websafecolors.php" and put the following contents in it:
    PHP Code:
    <?
    header
    ('Content-type: image/png');
    $im imagecreate(1218);

    // Background color allocate
    imagecolorallocate($im255255255); // give the image a white background

    class Color
    {
        var 
    $r;
        var 
    $g;
        var 
    $b;
    }

    $subcomponents = array(hexdec('00'), hexdec('33'), hexdec('66'),
        
    hexdec('99'), hexdec('CC'), hexdec('FF'));
        
    $colors = array();
    $c = new Color;
    for (
    $r 0$r sizeof($subcomponents); $r++)
    {
        for (
    $g 0$g sizeof($subcomponents); $g++)
        {
            for (
    $b 0$b sizeof($subcomponents); $b++)
            {
                
    $c->$subcomponents[$r];
                
    $c->$subcomponents[$g];
                
    $c->$subcomponents[$b];
                
    array_push($colors$c);
            }
        }
    }

    $x = -1;
    $y 0;
    foreach (
    $colors as $c)
    {
        
    $x++;
        if (
    $x 11)
        {
            
    $x 0;
            
    $y++;
        }
        
    $color imagecolorallocate($im$c->r$c->g$c->b);
        
    imagesetpixel($im$x$y$color);
    }

    imagepng($im);
    ?>
    2. Open the page in your browser after (if need be) uploading it to your host

    The resulting image is attached below; you can blow it up in Photoshop or using the Windows Magnifier (Start > Programs > Accessibility > Magnifier). Yes, it's a simple tutorial but a useful one.
    Attached Images Attached Images
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    A bigger version of the palette:
    Attached Images Attached Images
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    [Cough, cough] here's an interactive one I made with javascript.

    http://www.advancedwebcontent.com/bo...-palette.shtml

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Doesn't work for me, transio. All I see are varying shades of green in the larger box.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    err.. umm... what browser are you using?

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    How embarrassing. The script wasn't working for Netscape.

    I replaced all the direct element references with getElementById references, and it works now.

    Thanks for the tip!

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Actually, I'm using IE6 but since IE6 also uses getElementById, it works now for it too.

    You're welcome.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Member Black Vivi's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    75
    Member #
    1072
    how wud u make it so each color is 10 x 10 pixels instead of 1 x 1 pixel for each color (i suk at images using PHP)
    Download Firebird now!

  10. #9
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    Vivi, I'm not very good at images either. In fact I barley know whats going on. But I think that after the image is made you would just set it's height and width with html to 120x180px. This may or may not work depending on your application, but if your just using it for a webpage this is probably the best way, as it keeps the image very small. If you just want a bigger (non-dynamic) picture you can always use paint/photoshop.

  11. #10
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    To do it server-side, you'd have to draw a bunch of filled rectangles (i.e., change the code where pixels are drawn). It's not that hard, actually, because the math would still be the same.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com