CODEWITHSUNDEEP
css
422
422

Reputation: 5770

How to Convert RGB to HEX ( for Gradients )

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

Upvotes: 0

Views: 13528

Answers (2)

Jerry Coffin
Jerry Coffin

Reputation: 490128

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.

Upvotes: 1

jdi
jdi

Reputation: 92569

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.

Upvotes: 3

Related Questions