HTML Color Codes - Dofactory
Có thể bạn quan tâm
HTML colors are used to define text, background, border, and other property colors.
Color values are specified with HEX, RGB, HSL, RGBA, HSLA, or predefined Color names.
Example
#
An <input> field with a hex background-color.
<style> .input-colors { background-color: #f6f8ff; padding: 10px; } </style> <input type="text" class="input-colors" placeholder="Your email"> Try it liveFor more details on background colors, see our CSS background-color Reference.
HTML Background Images HTML Color NamesColor Names
#
One way to assign HTML colors is to use Color Names (White, Purple, Turquoise, etc.).
Not all colors have a corresponding color name.
For a list of color names, check our HTML Colors Names Tutorial.
Different color names applied to each element.
Firebrick Chocolate Orangered Darkkhaki Seagreen Teal <div class="row" style="line-height:80px;color:white;"> <div class="col-md-4 text-center"> <div style="background-color:firebrick;">Firebrick</div> </div> <div class="col-md-4 text-center"> <div style="background-color:chocolate;">Chocolate</div> </div> <div class="col-md-4 text-center"> <div style="background-color:orangered;">Orangered</div> </div> </div> <div class="row" style="line-height:80px;color:white; margin-top: 30px;"> <div class="col-md-4 text-center"> <div style="background-color:darkkhaki;">Darkkhaki</div> </div> <div class="col-md-4 text-center"> <div style="background-color:seagreen;">Seagreen</div> </div> <div class="col-md-4 text-center"> <div style="background-color:teal;">Teal</div> </div> </div> Try it liveColor Values
#
Color values can also be expressed as RGB, HEX, and HSL. Four different color formats setting the same background color.
Name: Tomato
RGB: rgb(255, 99, 71)
HEX: #ff6347
HSL: hsl(9.13, 100%, 63.92%)
<style> .myp { color: #fff; padding: 10px; } </style> <p class="myp" style="background-color: tomato;">Name: Tomato</p> <p class="myp" style="background-color: rgb(255, 99, 71);">RGB: rgb(255, 99, 71)</p> <p class="myp" style="background-color: #ff6347;">HEX: #ff6347</p> <p class="myp" style="background-color: hsl(9.13, 100%, 63.92%); ">HSL: hsl(9.13, 100%, 63.92%)</p> Try it liveTwo additional formats that add transparency are RGBA and HSLA. This example adds 70% transparency to the background rgb and hsl values.
RGBA: rgb(255, 99, 71 ,0.5)
HSLA: hsl(9.13, 100%, 63.92%, 0.5)
<style> .myp { color: #fff; padding: 10px; } </style> <p class="myp" style="background-color: rgb(255, 99, 71 ,0.7);">RGBA: rgb(255, 99, 71 ,0.5)</p> <p class="myp" style="background-color: hsl(9.13, 100%, 63.92%, 0.7);">HSLA: hsl(9.13, 100%, 63.92%, 0.5)</p> Try it liveRGB Values
#
RGB stands for red, green, and blue.
RBG color values are expressed in this format: rgb(red, green, blue).
Each parameter (red, green, and blue) value defines the color intensity between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the other parameters are set to 0.
Different RGB values applied to each element.
rgb(178, 34, 34) rgb(210, 105, 30) rgb(255, 69, 0) rgb(189, 183, 107) rgb(46, 139, 87) rgb(0, 128, 128) <div class="row" style="line-height:80px;color:white;"> <div class="col-md-4 text-center"> <div style="background-color: rgb(178, 34, 34);">rgb(178, 34, 34)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: rgb(210, 105, 30);">rgb(210, 105, 30)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: rgb(255, 69, 0);">rgb(255, 69, 0)</div> </div> </div> <div class="row" style="line-height:80px;color:white; margin-top: 30px;"> <div class="col-md-4 text-center"> <div style="background-color: rgb(189, 183, 107);">rgb(189, 183, 107)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: rgb(46, 139, 87);">rgb(46, 139, 87)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: rgb(0, 128, 128);">rgb(0, 128, 128)</div> </div> </div> Try it liveWith RGB, shades of gray are defined with equal values for each of the 3 parameters, like so.
rgb(0, 0, 0) rgb(60, 60, 60) rgb(180, 180, 180) rgb(180, 180, 180) rgb(240, 240, 240) rgb(255, 255, 255) <div class="row" style="line-height:80px;color:white;"> <div class="col-lg-4 text-center"> <div style="background-color:rgb(0, 0, 0) ;">rgb(0, 0, 0)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:rgb(60, 60, 60) ;">rgb(60, 60, 60)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:rgb(120, 120, 120) ;">rgb(180, 180, 180)</div> </div> </div> <div class="row" style="line-height:80px;color:white;margin-top:30px;"> <div class="col-lg-4 text-center"> <div style="background-color:rgb(180, 180, 180) ;">rgb(180, 180, 180)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:rgb(240, 240, 240) ; color: #000">rgb(240, 240, 240)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:rgb(255, 255, 255) ; color: #000">rgb(255, 255, 255)</div> </div> </div> Try it liveHEX Values
#
HEX stands for hexadecimal.
HEX color values are specified in this format: #rrggbb.
Each parameter rr (red), gg (green), and bb(blue) are hexadecimal values between 00 (0) and ff (255).
For example, #ff0000 is displayed as red, because red is set to its highest value ff (255) and the others are set to 00 (0).
Different HEX values applied to each element.
#b22222 #d2691e #ff4500 #bdb76b #2e8b57 #008080 <div class="row" style="line-height:80px;color:white;"> <div class="col-md-4 text-center"> <div style="background-color: #b22222;">#b22222</div> </div> <div class="col-md-4 text-center"> <div style="background-color: #d2691e;">#d2691e</div> </div> <div class="col-md-4 text-center"> <div style="background-color: #ff4500;">#ff4500</div> </div> </div> <div class="row" style="line-height:80px;color:white; margin-top: 30px;"> <div class="col-md-4 text-center"> <div style="background-color: #bdb76b;">#bdb76b</div> </div> <div class="col-md-4 text-center"> <div style="background-color: #2e8b57;">#2e8b57</div> </div> <div class="col-md-4 text-center"> <div style="background-color: #008080;">#008080</div> </div> </div> Try it liveWith HEX, shades of gray are defined using equal values for each of the 3 light sources, like so.
#000000 #3c3c3c #787878 #b4b4b4 #f0f0f0 #ffffff <div class="row" style="line-height:80px;color:white;"> <div class="col-lg-4 text-center"> <div style="background-color:#000000 ;">#000000</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:#3c3c3c ;">#3c3c3c</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:#787878 ;">#787878</div> </div> </div> <div class="row" style="line-height:80px;color:white;margin-top:30px;"> <div class="col-lg-4 text-center"> <div style="background-color:#b4b4b4 ;">#b4b4b4</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:#f0f0f0 ; color: #000">#f0f0f0</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:#ffffff ; color: #000">#ffffff</div> </div> </div> Try it liveHSL Values
#
HSL stands for hue, saturation, and lightness (HSL).
HSL color values are specified as hsl(hue, saturation, lightness).
Hue is a 0-360 degree on the color wheel: 0 is red, 120 is green, 240 is blue.
Saturation is a % value: 0% is no color (i.e. gray), and 100% is full color.
Lightness is also a % value: 0% is black, 100% is white.
Different HSL values applied to each element.
hsl(0, 68%, 42%) hsl(25, 75%, 47%) hsl(16, 100%, 50%) hsl(56, 38%, 58%) hsl(146, 50%, 36%) hsl(180, 100%, 25%) <div class="row" style="line-height:80px;color:white;"> <div class="col-md-4 text-center"> <div style="background-color: hsl(0, 68%, 42%);">hsl(0, 68%, 42%)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: hsl(25, 75%, 47%)">hsl(25, 75%, 47%)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: hsl(16, 100%, 50%);">hsl(16, 100%, 50%)</div> </div> </div> <div class="row" style="line-height:80px;color:white; margin-top: 30px;"> <div class="col-md-4 text-center"> <div style="background-color: hsl(56, 38%, 58%);">hsl(56, 38%, 58%)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: hsl(146, 50%, 36%);">hsl(146, 50%, 36%)</div> </div> <div class="col-md-4 text-center"> <div style="background-color: hsl(180, 100%, 25%);">hsl(180, 100%, 25%)</div> </div> </div> Try it liveSaturation in HSL
#
Saturation represents the color intensity.
100% displays pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray and you can no longer see the color.
Different HSL saturation levels applied to each element.
hsl(7, 100%, 50%) hsl(7, 80%, 50%) hsl(7, 60%, 50%) hsl(7, 40%, 50%) hsl(7, 20%, 50%) hsl(7, 0%, 50%) <div class="row" style="line-height:80px;color:white;"> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 100%, 62%) ;">hsl(7, 100%, 50%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 80%, 50%) ;">hsl(7, 80%, 50%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 60%, 50%) ;">hsl(7, 60%, 50%)</div> </div> </div> <div class="row" style="line-height:80px;color:white;margin-top:30px;"> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 40%, 50%) ;">hsl(7, 40%, 50%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 20%, 50%) ;">hsl(7, 20%, 50%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 0%, 50%) ;">hsl(7, 0%, 50%)</div> </div> </div> Try it liveLightness in HSL
#
The color lightness describes the amount of light the color will use.
0% means no light (black).
50% means medium lightness (neither dark nor light).
100% means full lightness (white).
Different HSL lightness levels applied to each element.
hsl(7, 89%, 0%) hsl(7, 89%, 25%) hsl(7, 89%, 50%) hsl(7, 89%, 75%) hsl(7, 89%, 90%) hsl(7, 89%, 100%) <div class="row" style="line-height:80px;color:white;"> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 0%) ;">hsl(7, 89%, 0%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 25%) ;">hsl(7, 89%, 25%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 50%) ;">hsl(7, 89%, 50%)</div> </div> </div> <div class="row" style="line-height:80px;color:white;margin-top:30px;"> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 75%) ;">hsl(7, 89%, 75%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 90%) ; color: black">hsl(7, 89%, 90%)</div> </div> <div class="col-lg-4 text-center"> <div style="background-color:hsl(7, 89%, 100%) ; color: black">hsl(7, 89%, 100%)</div> </div> </div> Try it liveShades of gray are often defined in HSL by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades:
hsl(0, 0%, 0%) hsl(0, 0%, 24%) hsl(0, 0%, 47%)Từ khóa » Html Color Codes Rgba
-
Decimal Red, Green, Blue, And Opacity Color Codes
-
CSS RGB And RGBA Colors - W3Schools
-
HTML RGB And RGBA Colors - W3Schools
-
HTML Color Codes - What's Your Color
-
RGBA Color - Html Colors
-
HTML Color Codes | HEX, RGB, RGBA, HSL And HSLA Values
-
- CSS: Cascading Style Sheets - MDN Web Docs -
RGB Color Codes Chart
-
How To Use CSS Hex Code Colors With Alpha Values - DigitalOcean
-
HTML Color Codes
-
Defining Colors In CSS
-
Color Enumeration And ColorFade, ColorValue, And RGBA Functions ...
-
Convert RGBA Color To HTML Color Code - Copy Programming
-
Images: Color Codes - LibGuides At Texas Wesleyan University