Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbwert #dcdcdc

von Thomas Salvador.

Graustufen gehören zu den unbunten Farben und zeichnen sich dadurch aus, dass ihre Farbwerte für Rot, Grün und Blau gleich sind.

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbwert #dcdcdc

DetailHintergrundfarbwert #dcdcdc Verlauf nach WeißVerlauf nach Schwarz
Farbwert :#dcdcdc#dcdcdc#dcdcdc#dcdcdc#dcdcdc
Farbe :gray220#e1e1e1#e1e1e1#bcbcbc#bcbcbc
HTML:#dcdcdc#e6e6e6#e6e6e6#9d9d9d#9d9d9d
CSS:#dcdcdc#ebebeb#ebebeb#7d7d7d#7d7d7d
CSS (Wert):#dcdcdc#f0f0f0#f0f0f0#5e5e5e#5e5e5e
CSS (kürzest):#dcdcdc#f5f5f5#f5f5f5#3e3e3e#3e3e3e
CSS (RGB):rgb(220,220,220)#fafafa#fafafa#1f1f1f#1f1f1f
CSS (%RGB):rgb(86%,86%,86%)#ffffff#ffffff#000000#000000

Beispiel zur Kombination mit Farbwert #dcdcdc

Änderung der Unterstreichung bei Hover mit Tag samp

Die Unterstreichungsfarbe soll sich ändern, wenn man mit der Maus darauf zeigt. Für das Beispiel bereiten wir zunächst Formatierungen von <samp> vor.

<style type="text/css"><!--
  samp { border-bottom:4px inset #7e68b3; }
//-->
</style>
Nun stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf Farbwert #dcdcdc gesetzt wird.
<style type="text/css"><!--
  samp:hover { 
    border-bottom-color:#dcdcdc;
  }
//-->
</style>

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man dies bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema samp können Sie in Text in HTML lesen. Einzelheiten des hier genutzten Tag samp sind in der HTML Referenz unter <samp> genau gezeigt.

Tabelle der 256 Graustufen in HTML

Hintergrund Farbwert Farbe undSchrift Farbwert Farbkombination
black #000000         +  black #000000 black / #dcdcdc
gray1 #010101         +  gray1 #010101 gray1 / #dcdcdc
gray2 #020202         +  gray2 #020202 gray2 / #dcdcdc
gray3 #030303         +  gray3 #030303 gray3 / #dcdcdc
gray4 #040404         +  gray4 #040404 gray4 / #dcdcdc
gray5 #050505         +  gray5 #050505 gray5 / #dcdcdc
gray6 #060606         +  gray6 #060606 gray6 / #dcdcdc
gray7 #070707         +  gray7 #070707 gray7 / #dcdcdc
gray8 #080808         +  gray8 #080808 gray8 / #dcdcdc
gray9 #090909         +  gray9 #090909 gray9 / #dcdcdc
gray10 #0a0a0a         +  gray10 #0a0a0a gray10 / #dcdcdc
gray11 #0b0b0b         +  gray11 #0b0b0b gray11 / #dcdcdc
gray12 #0c0c0c         +  gray12 #0c0c0c gray12 / #dcdcdc
gray13 #0d0d0d         +  gray13 #0d0d0d gray13 / #dcdcdc
gray14 #0e0e0e         +  gray14 #0e0e0e gray14 / #dcdcdc
gray15 #0f0f0f         +  gray15 #0f0f0f gray15 / #dcdcdc
gray16 #101010         +  gray16 #101010 gray16 / #dcdcdc
gray17 #111111         +  gray17 #111111 gray17 / #dcdcdc
gray18 #121212         +  gray18 #121212 gray18 / #dcdcdc
gray19 #131313         +  gray19 #131313 gray19 / #dcdcdc
gray20 #141414         +  gray20 #141414 gray20 / #dcdcdc
gray21 #151515         +  gray21 #151515 gray21 / #dcdcdc
gray22 #161616         +  gray22 #161616 gray22 / #dcdcdc
gray23 #171717         +  gray23 #171717 gray23 / #dcdcdc
gray24 #181818         +  gray24 #181818 gray24 / #dcdcdc
gray25 #191919         +  gray25 #191919 gray25 / #dcdcdc
gray26 #1a1a1a         +  gray26 #1a1a1a gray26 / #dcdcdc
gray27 #1b1b1b         +  gray27 #1b1b1b gray27 / #dcdcdc
gray28 #1c1c1c         +  gray28 #1c1c1c gray28 / #dcdcdc
gray29 #1d1d1d         +  gray29 #1d1d1d gray29 / #dcdcdc
gray30 #1e1e1e         +  gray30 #1e1e1e gray30 / #dcdcdc
gray31 #1f1f1f         +  gray31 #1f1f1f gray31 / #dcdcdc
gray32 #202020         +  gray32 #202020 gray32 / #dcdcdc
gray33 #212121         +  gray33 #212121 gray33 / #dcdcdc
gray34 #222222         +  gray34 #222222 gray34 / #dcdcdc
gray35 #232323         +  gray35 #232323 gray35 / #dcdcdc
gray36 #242424         +  gray36 #242424 gray36 / #dcdcdc
gray37 #252525         +  gray37 #252525 gray37 / #dcdcdc
gray38 #262626         +  gray38 #262626 gray38 / #dcdcdc
gray39 #272727         +  gray39 #272727 gray39 / #dcdcdc
gray40 #282828         +  gray40 #282828 gray40 / #dcdcdc
gray41 #292929         +  gray41 #292929 gray41 / #dcdcdc
gray42 #2a2a2a         +  gray42 #2a2a2a gray42 / #dcdcdc
gray43 #2b2b2b         +  gray43 #2b2b2b gray43 / #dcdcdc
gray44 #2c2c2c         +  gray44 #2c2c2c gray44 / #dcdcdc
gray45 #2d2d2d         +  gray45 #2d2d2d gray45 / #dcdcdc
gray46 #2e2e2e         +  gray46 #2e2e2e gray46 / #dcdcdc
gray47 #2f2f2f         +  gray47 #2f2f2f gray47 / #dcdcdc
gray48 #303030         +  gray48 #303030 gray48 / #dcdcdc
gray49 #313131         +  gray49 #313131 gray49 / #dcdcdc
gray50 #323232         +  gray50 #323232 gray50 / #dcdcdc
gray51 #333333         +  gray51 #333333 gray51 / #dcdcdc
gray52 #343434         +  gray52 #343434 gray52 / #dcdcdc
gray53 #353535         +  gray53 #353535 gray53 / #dcdcdc
gray54 #363636         +  gray54 #363636 gray54 / #dcdcdc
gray55 #373737         +  gray55 #373737 gray55 / #dcdcdc
gray56 #383838         +  gray56 #383838 gray56 / #dcdcdc
gray57 #393939         +  gray57 #393939 gray57 / #dcdcdc
gray58 #3a3a3a         +  gray58 #3a3a3a gray58 / #dcdcdc
gray59 #3b3b3b         +  gray59 #3b3b3b gray59 / #dcdcdc
gray60 #3c3c3c         +  gray60 #3c3c3c gray60 / #dcdcdc
gray61 #3d3d3d         +  gray61 #3d3d3d gray61 / #dcdcdc
gray62 #3e3e3e         +  gray62 #3e3e3e gray62 / #dcdcdc
gray63 #3f3f3f         +  gray63 #3f3f3f gray63 / #dcdcdc
gray64 #404040         +  gray64 #404040 gray64 / #dcdcdc
gray65 #414141         +  gray65 #414141 gray65 / #dcdcdc
gray66 #424242         +  gray66 #424242 gray66 / #dcdcdc
gray67 #434343         +  gray67 #434343 gray67 / #dcdcdc
gray68 #444444         +  gray68 #444444 gray68 / #dcdcdc
gray69 #454545         +  gray69 #454545 gray69 / #dcdcdc
gray70 #464646         +  gray70 #464646 gray70 / #dcdcdc
gray71 #474747         +  gray71 #474747 gray71 / #dcdcdc
gray72 #484848         +  gray72 #484848 gray72 / #dcdcdc
gray73 #494949         +  gray73 #494949 gray73 / #dcdcdc
gray74 #4a4a4a         +  gray74 #4a4a4a gray74 / #dcdcdc
gray75 #4b4b4b         +  gray75 #4b4b4b gray75 / #dcdcdc
gray76 #4c4c4c         +  gray76 #4c4c4c gray76 / #dcdcdc
gray77 #4d4d4d         +  gray77 #4d4d4d gray77 / #dcdcdc
gray78 #4e4e4e         +  gray78 #4e4e4e gray78 / #dcdcdc
gray79 #4f4f4f         +  gray79 #4f4f4f gray79 / #dcdcdc
gray80 #505050         +  gray80 #505050 gray80 / #dcdcdc
gray81 #515151         +  gray81 #515151 gray81 / #dcdcdc
gray82 #525252         +  gray82 #525252 gray82 / #dcdcdc
gray83 #535353         +  gray83 #535353 gray83 / #dcdcdc
gray84 #545454         +  gray84 #545454 gray84 / #dcdcdc
gray85 #555555         +  gray85 #555555 gray85 / #dcdcdc
gray86 #565656         +  gray86 #565656 gray86 / #dcdcdc
gray87 #575757         +  gray87 #575757 gray87 / #dcdcdc
gray88 #585858         +  gray88 #585858 gray88 / #dcdcdc
gray89 #595959         +  gray89 #595959 gray89 / #dcdcdc
gray90 #5a5a5a         +  gray90 #5a5a5a gray90 / #dcdcdc
gray91 #5b5b5b         +  gray91 #5b5b5b gray91 / #dcdcdc
gray92 #5c5c5c         +  gray92 #5c5c5c gray92 / #dcdcdc
gray93 #5d5d5d         +  gray93 #5d5d5d gray93 / #dcdcdc
gray94 #5e5e5e         +  gray94 #5e5e5e gray94 / #dcdcdc
gray95 #5f5f5f         +  gray95 #5f5f5f gray95 / #dcdcdc
gray96 #606060         +  gray96 #606060 gray96 / #dcdcdc
gray97 #616161         +  gray97 #616161 gray97 / #dcdcdc
gray98 #626262         +  gray98 #626262 gray98 / #dcdcdc
gray99 #636363         +  gray99 #636363 gray99 / #dcdcdc
gray100 #646464         +  gray100 #646464 gray100 / #dcdcdc
gray101 #656565         +  gray101 #656565 gray101 / #dcdcdc
gray102 #666666         +  gray102 #666666 gray102 / #dcdcdc
gray103 #676767         +  gray103 #676767 gray103 / #dcdcdc
gray104 #686868         +  gray104 #686868 gray104 / #dcdcdc
gray105 #696969         +  gray105 #696969 gray105 / #dcdcdc
gray106 #6a6a6a         +  gray106 #6a6a6a gray106 / #dcdcdc
gray107 #6b6b6b         +  gray107 #6b6b6b gray107 / #dcdcdc
gray108 #6c6c6c         +  gray108 #6c6c6c gray108 / #dcdcdc
gray109 #6d6d6d         +  gray109 #6d6d6d gray109 / #dcdcdc
gray110 #6e6e6e         +  gray110 #6e6e6e gray110 / #dcdcdc
gray111 #6f6f6f         +  gray111 #6f6f6f gray111 / #dcdcdc
gray112 #707070         +  gray112 #707070 gray112 / #dcdcdc
gray113 #717171         +  gray113 #717171 gray113 / #dcdcdc
gray114 #727272         +  gray114 #727272 gray114 / #dcdcdc
gray115 #737373         +  gray115 #737373 gray115 / #dcdcdc
gray116 #747474         +  gray116 #747474 gray116 / #dcdcdc
gray117 #757575         +  gray117 #757575 gray117 / #dcdcdc
gray118 #767676         +  gray118 #767676 gray118 / #dcdcdc
gray119 #777777         +  gray119 #777777 gray119 / #dcdcdc
gray120 #787878         +  gray120 #787878 gray120 / #dcdcdc
gray121 #797979         +  gray121 #797979 gray121 / #dcdcdc
gray122 #7a7a7a         +  gray122 #7a7a7a gray122 / #dcdcdc
gray123 #7b7b7b         +  gray123 #7b7b7b gray123 / #dcdcdc
gray124 #7c7c7c         +  gray124 #7c7c7c gray124 / #dcdcdc
gray125 #7d7d7d         +  gray125 #7d7d7d gray125 / #dcdcdc
gray126 #7e7e7e         +  gray126 #7e7e7e gray126 / #dcdcdc
gray127 #7f7f7f         +  gray127 #7f7f7f gray127 / #dcdcdc
gray #808080         +  gray #808080 gray / #dcdcdc
gray129 #818181         +  gray129 #818181 gray129 / #dcdcdc
gray130 #828282         +  gray130 #828282 gray130 / #dcdcdc
gray131 #838383         +  gray131 #838383 gray131 / #dcdcdc
gray132 #848484         +  gray132 #848484 gray132 / #dcdcdc
gray133 #858585         +  gray133 #858585 gray133 / #dcdcdc
gray134 #868686         +  gray134 #868686 gray134 / #dcdcdc
gray135 #878787         +  gray135 #878787 gray135 / #dcdcdc
gray136 #888888         +  gray136 #888888 gray136 / #dcdcdc
gray137 #898989         +  gray137 #898989 gray137 / #dcdcdc
gray138 #8a8a8a         +  gray138 #8a8a8a gray138 / #dcdcdc
gray139 #8b8b8b         +  gray139 #8b8b8b gray139 / #dcdcdc
gray140 #8c8c8c         +  gray140 #8c8c8c gray140 / #dcdcdc
gray141 #8d8d8d         +  gray141 #8d8d8d gray141 / #dcdcdc
gray142 #8e8e8e         +  gray142 #8e8e8e gray142 / #dcdcdc
gray143 #8f8f8f         +  gray143 #8f8f8f gray143 / #dcdcdc
gray144 #909090         +  gray144 #909090 gray144 / #dcdcdc
gray145 #919191         +  gray145 #919191 gray145 / #dcdcdc
gray146 #929292         +  gray146 #929292 gray146 / #dcdcdc
gray147 #939393         +  gray147 #939393 gray147 / #dcdcdc
gray148 #949494         +  gray148 #949494 gray148 / #dcdcdc
gray149 #959595         +  gray149 #959595 gray149 / #dcdcdc
gray150 #969696         +  gray150 #969696 gray150 / #dcdcdc
gray151 #979797         +  gray151 #979797 gray151 / #dcdcdc
gray152 #989898         +  gray152 #989898 gray152 / #dcdcdc
gray153 #999999         +  gray153 #999999 gray153 / #dcdcdc
gray154 #9a9a9a         +  gray154 #9a9a9a gray154 / #dcdcdc
gray155 #9b9b9b         +  gray155 #9b9b9b gray155 / #dcdcdc
gray156 #9c9c9c         +  gray156 #9c9c9c gray156 / #dcdcdc
gray157 #9d9d9d         +  gray157 #9d9d9d gray157 / #dcdcdc
gray158 #9e9e9e         +  gray158 #9e9e9e gray158 / #dcdcdc
gray159 #9f9f9f         +  gray159 #9f9f9f gray159 / #dcdcdc
gray160 #a0a0a0         +  gray160 #a0a0a0 gray160 / #dcdcdc
gray161 #a1a1a1         +  gray161 #a1a1a1 gray161 / #dcdcdc
gray162 #a2a2a2         +  gray162 #a2a2a2 gray162 / #dcdcdc
gray163 #a3a3a3         +  gray163 #a3a3a3 gray163 / #dcdcdc
gray164 #a4a4a4         +  gray164 #a4a4a4 gray164 / #dcdcdc
gray165 #a5a5a5         +  gray165 #a5a5a5 gray165 / #dcdcdc
gray166 #a6a6a6         +  gray166 #a6a6a6 gray166 / #dcdcdc
gray167 #a7a7a7         +  gray167 #a7a7a7 gray167 / #dcdcdc
gray168 #a8a8a8         +  gray168 #a8a8a8 gray168 / #dcdcdc
gray169 #a9a9a9         +  gray169 #a9a9a9 gray169 / #dcdcdc
gray170 #aaaaaa         +  gray170 #aaaaaa gray170 / #dcdcdc
gray171 #ababab         +  gray171 #ababab gray171 / #dcdcdc
gray172 #acacac         +  gray172 #acacac gray172 / #dcdcdc
gray173 #adadad         +  gray173 #adadad gray173 / #dcdcdc
gray174 #aeaeae         +  gray174 #aeaeae gray174 / #dcdcdc
gray175 #afafaf         +  gray175 #afafaf gray175 / #dcdcdc
gray176 #b0b0b0         +  gray176 #b0b0b0 gray176 / #dcdcdc
gray177 #b1b1b1         +  gray177 #b1b1b1 gray177 / #dcdcdc
gray178 #b2b2b2         +  gray178 #b2b2b2 gray178 / #dcdcdc
gray179 #b3b3b3         +  gray179 #b3b3b3 gray179 / #dcdcdc
gray180 #b4b4b4         +  gray180 #b4b4b4 gray180 / #dcdcdc
gray181 #b5b5b5         +  gray181 #b5b5b5 gray181 / #dcdcdc
gray182 #b6b6b6         +  gray182 #b6b6b6 gray182 / #dcdcdc
gray183 #b7b7b7         +  gray183 #b7b7b7 gray183 / #dcdcdc
gray184 #b8b8b8         +  gray184 #b8b8b8 gray184 / #dcdcdc
gray185 #b9b9b9         +  gray185 #b9b9b9 gray185 / #dcdcdc
gray186 #bababa         +  gray186 #bababa gray186 / #dcdcdc
gray187 #bbbbbb         +  gray187 #bbbbbb gray187 / #dcdcdc
gray188 #bcbcbc         +  gray188 #bcbcbc gray188 / #dcdcdc
gray189 #bdbdbd         +  gray189 #bdbdbd gray189 / #dcdcdc
gray190 #bebebe         +  gray190 #bebebe gray190 / #dcdcdc
gray191 #bfbfbf         +  gray191 #bfbfbf gray191 / #dcdcdc
silver #c0c0c0         +  silver #c0c0c0 silver / #dcdcdc
gray193 #c1c1c1         +  gray193 #c1c1c1 gray193 / #dcdcdc
gray194 #c2c2c2         +  gray194 #c2c2c2 gray194 / #dcdcdc
gray195 #c3c3c3         +  gray195 #c3c3c3 gray195 / #dcdcdc
gray196 #c4c4c4         +  gray196 #c4c4c4 gray196 / #dcdcdc
gray197 #c5c5c5         +  gray197 #c5c5c5 gray197 / #dcdcdc
gray198 #c6c6c6         +  gray198 #c6c6c6 gray198 / #dcdcdc
gray199 #c7c7c7         +  gray199 #c7c7c7 gray199 / #dcdcdc
gray200 #c8c8c8         +  gray200 #c8c8c8 gray200 / #dcdcdc
gray201 #c9c9c9         +  gray201 #c9c9c9 gray201 / #dcdcdc
gray202 #cacaca         +  gray202 #cacaca gray202 / #dcdcdc
gray203 #cbcbcb         +  gray203 #cbcbcb gray203 / #dcdcdc
gray204 #cccccc         +  gray204 #cccccc gray204 / #dcdcdc
gray205 #cdcdcd         +  gray205 #cdcdcd gray205 / #dcdcdc
gray206 #cecece         +  gray206 #cecece gray206 / #dcdcdc
gray207 #cfcfcf         +  gray207 #cfcfcf gray207 / #dcdcdc
gray208 #d0d0d0         +  gray208 #d0d0d0 gray208 / #dcdcdc
gray209 #d1d1d1         +  gray209 #d1d1d1 gray209 / #dcdcdc
gray210 #d2d2d2         +  gray210 #d2d2d2 gray210 / #dcdcdc
gray211 #d3d3d3         +  gray211 #d3d3d3 gray211 / #dcdcdc
gray212 #d4d4d4         +  gray212 #d4d4d4 gray212 / #dcdcdc
gray213 #d5d5d5         +  gray213 #d5d5d5 gray213 / #dcdcdc
gray214 #d6d6d6         +  gray214 #d6d6d6 gray214 / #dcdcdc
gray215 #d7d7d7         +  gray215 #d7d7d7 gray215 / #dcdcdc
gray216 #d8d8d8         +  gray216 #d8d8d8 gray216 / #dcdcdc
gray217 #d9d9d9         +  gray217 #d9d9d9 gray217 / #dcdcdc
gray218 #dadada         +  gray218 #dadada gray218 / #dcdcdc
gray219 #dbdbdb         +  gray219 #dbdbdb gray219 / #dcdcdc
gray220 #dcdcdc         +  gray220 #dcdcdc gray220 / #dcdcdc
gray221 #dddddd         +  gray221 #dddddd gray221 / #dcdcdc
gray222 #dedede         +  gray222 #dedede gray222 / #dcdcdc
gray223 #dfdfdf         +  gray223 #dfdfdf gray223 / #dcdcdc
gray224 #e0e0e0         +  gray224 #e0e0e0 gray224 / #dcdcdc
gray225 #e1e1e1         +  gray225 #e1e1e1 gray225 / #dcdcdc
gray226 #e2e2e2         +  gray226 #e2e2e2 gray226 / #dcdcdc
gray227 #e3e3e3         +  gray227 #e3e3e3 gray227 / #dcdcdc
gray228 #e4e4e4         +  gray228 #e4e4e4 gray228 / #dcdcdc
gray229 #e5e5e5         +  gray229 #e5e5e5 gray229 / #dcdcdc
gray230 #e6e6e6         +  gray230 #e6e6e6 gray230 / #dcdcdc
gray231 #e7e7e7         +  gray231 #e7e7e7 gray231 / #dcdcdc
gray232 #e8e8e8         +  gray232 #e8e8e8 gray232 / #dcdcdc
gray233 #e9e9e9         +  gray233 #e9e9e9 gray233 / #dcdcdc
gray234 #eaeaea         +  gray234 #eaeaea gray234 / #dcdcdc
gray235 #ebebeb         +  gray235 #ebebeb gray235 / #dcdcdc
gray236 #ececec         +  gray236 #ececec gray236 / #dcdcdc
gray237 #ededed         +  gray237 #ededed gray237 / #dcdcdc
gray238 #eeeeee         +  gray238 #eeeeee gray238 / #dcdcdc
gray239 #efefef         +  gray239 #efefef gray239 / #dcdcdc
gray240 #f0f0f0         +  gray240 #f0f0f0 gray240 / #dcdcdc
gray241 #f1f1f1         +  gray241 #f1f1f1 gray241 / #dcdcdc
gray242 #f2f2f2         +  gray242 #f2f2f2 gray242 / #dcdcdc
gray243 #f3f3f3         +  gray243 #f3f3f3 gray243 / #dcdcdc
gray244 #f4f4f4         +  gray244 #f4f4f4 gray244 / #dcdcdc
gray245 #f5f5f5         +  gray245 #f5f5f5 gray245 / #dcdcdc
gray246 #f6f6f6         +  gray246 #f6f6f6 gray246 / #dcdcdc
gray247 #f7f7f7         +  gray247 #f7f7f7 gray247 / #dcdcdc
gray248 #f8f8f8         +  gray248 #f8f8f8 gray248 / #dcdcdc
gray249 #f9f9f9         +  gray249 #f9f9f9 gray249 / #dcdcdc
gray250 #fafafa         +  gray250 #fafafa gray250 / #dcdcdc
gray251 #fbfbfb         +  gray251 #fbfbfb gray251 / #dcdcdc
gray252 #fcfcfc         +  gray252 #fcfcfc gray252 / #dcdcdc
gray253 #fdfdfd         +  gray253 #fdfdfd gray253 / #dcdcdc
gray254 #fefefe         +  gray254 #fefefe gray254 / #dcdcdc
white #ffffff         +  white #ffffff white / #dcdcdc

Weitere Farbtabellen