{"id":2251,"date":"2017-04-04T22:06:38","date_gmt":"2017-04-04T22:06:38","guid":{"rendered":"http:\/\/cssreset.com\/?p=2251"},"modified":"2017-04-02T22:06:59","modified_gmt":"2017-04-02T22:06:59","slug":"how-to-convert-your-hex-color-codes-to-rgba","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-convert-your-hex-color-codes-to-rgba\/","title":{"rendered":"How to Convert Your Hex Color Codes to RGB"},"content":{"rendered":"

Each developer has his or her own preference for how they like to reference colors in their CSS code. Some developers are partial to using hex codes (a six character code of letters and numbers preceded by a #), while others prefer to use rgb codes (rgb codes are made up of three number values to indicate the amount of red, green, and blue in a color). \u00a0The problem with the fact that both hex and rgb codes are widely used is that there’s no easy or simple way to convert one type of color code to the other.<\/p>\n

Luckily for us developers, web apps exist that will quickly convert hex to rgb and vice versa in a matter of seconds (we didn’t include any rgba converters on this list, but remember — rgba is the same color as rgb, just with the option for transparency. To turn rgb into rgba you’ll just need to write rgba instead of rgb, then add a fourth value to the end of your list of rgb values in the parentheses. The value should be between 0 and 1 depending on how opaque you want your color to be. 1 for completely opaque, 0 for completely transparent). Take a look at the following list of platforms that will perform this conversion quickly and easily:<\/p>\n

1. COLORRRS<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

This website converts hex to rgb. All you need to do is enter the hex code into the first line and watch as the rgb conversion appears milliseconds later on the line below. The background color of the page will change to reflect the color you’re trying to convert.<\/p>\n

2. Rapid Tables<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Rapid Tables offers a more complex hex to rgb converter — not only does it convert from hex to rgb, but it also gives you the name of the CSS color and a small swatch preview of the color. The site also gives you the option to converts from rgb to hex, along with a handy conversion chart and explanations of the conversions.<\/p>\n

3. Hex to RGB<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Hex to RGB is a simple converter that also offers an rgb to hex conversion.<\/p>\n

4. W3 Schools<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

W3 Schools is a popular site that hosts tons of coding education content and resources for developers. Their rgb to hex converter doesn’t just provide the rgb and hex values of a color, but also the hsl, the hwb, cmyk, and ncol. Basically, if there’s any way to define a color in your CSS, W3 Schools’ converter has it covered.<\/p>\n

5. UI Color<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

UI Color is another site that simply converts hex to rgb and vice versa.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Each developer has his or her own preference for how they like to reference colors in their CSS code. Some developers are partial to using hex codes (a six character code of letters and numbers preceded by a #), while […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2251"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2251"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2251\/revisions"}],"predecessor-version":[{"id":2259,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2251\/revisions\/2259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2254"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}