0

I am using this: css progress bar

Its great, and we have virtually customised every aspect. The issue is, I really really hate the gradients, but they are in rgba values.

Does anyone know, how to change the gradients to hex values, so that we can finish the styling.

The (css we have ) is:

background-color: #74d04c;
/* Webkit background stripes and gradient */
background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0, rgba(255, 255, 255, 0.17)), color-stop(0.25, rgba(255, 255, 255, 0.17)), color-stop(0.26, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.51, rgba(255, 255, 255, 0.17)), color-stop(0.75, rgba(255, 255, 255, 0.17)), color-stop(0.76, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0.35))), #74d04c;


background: -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
 /* Give it a higher contrast outline */
 border: 1px solid #4c8932;

I just dont get rgb ( so would like to see how we can convert to #hex values )

Even a link would be fine.

Cheers

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
422
  • 5,714
  • 23
  • 83
  • 139

2 Answers2

3

Your examples make use of transparency. The css3 spec for defining a transparent color is using rgba(r,g,b,a)

There is an alternative syntax in the gradients for using HEX:

rgba(255, 255, 255, 0.25) => #FFFFFF 25%

See: http://gradients.glrzad.com/

Also, your justification that you "don't get rgb" should really be examined. Maybe you should take some time to undertand RGB as its a pretty important concept in digital color.

jdi
  • 90,542
  • 19
  • 167
  • 203
  • I get what RGB is and their values, I just dont get a method of converting these to hex values, which we do understand. Thanks , for the response, that site is cool. We use it often, but doesnt help in this matter. – 422 Apr 16 '12 at 00:15
  • @422: Ah, well that wasn't clear from your question. You said you "dont get rgb" so thats how I understood it. Apparently you were looking for some automated conversion utility to just flip flop your existing css? – jdi Apr 16 '12 at 00:17
  • exactly, well kind of paste int he rbg values minus opacity, and get the hex values. Reason being we have about 100-200 to do, argg lol. – 422 Apr 16 '12 at 00:27
  • @422: Can you write a script and do regex replacements? – jdi Apr 16 '12 at 00:28
  • Nope :( its cool, my son can do it when he gets back in 8 hours time lol – 422 Apr 16 '12 at 00:33
1

The usual hex representation is simply the red, green and blue values converted to hexadecimal (base 16), one byte apiece. Your 255,255,255 would be ffffff and 0,0,0 would be 000000. Though those don't show it, the notation uses two digits apiece, arranged as rrggbb, so (for example) rgb = 1,2,3 would convert to 010203.

Edit: If you're comfortable with command line tools (and have access to a C or C++ compiler), you might find something like this a somewhat easier way to do the conversion:

#include <stdio.h>
#include <stdlib.h>

int main(int argc, char **argv) {
    if (argc != 4) {
        fprintf(stderr, "Usage: cvt_hex r g b");
        return EXIT_FAILURE;
    }

    int r = atoi(argv[1]);
    int g = atoi(argv[2]);
    int b = atoi(argv[3]);

    printf("%2.2x%2.2x%2.2x", r, g, b);
    return 0;
}

Just be warned: this doesn't attempt much in the way of error checking, so if (for example) you give it a value greater than 255, it won't detect or warn you about the problem, just produce a result that won't work correctly.

Jerry Coffin
  • 476,176
  • 80
  • 629
  • 1,111
  • Thankyou, I had tried to find a rgb => hex conversion site. I understand the values ( as in R , G , B ) just cannot find a good resource for converting them without long windely typing each value into a box minus commas. Will plod on though, sure we can figure it out. – 422 Apr 16 '12 at 00:14
  • 1
    @422: See edited answer -- not sure if it'll help, but if you're all right with command line tools, it might. – Jerry Coffin Apr 16 '12 at 00:33
  • Good onya @Jerry Coffin , appreciate that :) – 422 Apr 16 '12 at 00:37
  • 1
    @422: Here is an almost 2-liner if you want python: http://stackoverflow.com/a/4296263/496445 – jdi Apr 16 '12 at 00:48