Difference between revisions of "HTML 256 to ANSI 16"

From Fate's Harvest
Jump to: navigation, search
Line 3: Line 3:
 
table, th, td {border: 1px solid #000000;}
 
table, th, td {border: 1px solid #000000;}
 
</css>
 
</css>
 +
__NOTOC__ __NOEDITSECTION__
 
This is a list of color codes, and how the HTML 256 corresponds to the ANSI 16, so if you want a color, you can see how it will show to people whether they're using 256 color or not.
 
This is a list of color codes, and how the HTML 256 corresponds to the ANSI 16, so if you want a color, you can see how it will show to people whether they're using 256 color or not.
 +
 +
The upper section shows all of the colours, and gradients.  The bottom section shows the same colours, separated out into which display as which ANSI 16 equivalent.
 +
  
 
To set yourself so you can see color in general, it is:
 
To set yourself so you can see color in general, it is:
Line 63: Line 67:
 
|}
 
|}
  
 +
 +
=List by Gradient=
  
 
{|style="border: 1px solid #000000; text-align:center; font-family: Consolas, monaco, monospace;" width="250px"
 
{|style="border: 1px solid #000000; text-align:center; font-family: Consolas, monaco, monospace;" width="250px"
Line 802: Line 808:
 
|width="15px" style="border: 1px solid #fffffc;" |
 
|width="15px" style="border: 1px solid #fffffc;" |
 
|style="background: #ffffff; color: #000000;"|#ffffff
 
|style="background: #ffffff; color: #000000;"|#ffffff
 +
|style="background: #ffffff; color: #000000;"|%xh%xw
 +
|}
 +
 +
 +
=List by Colour=
 +
For ease of use, the colours above are separated here by which ANSI 16 colours they correspond to.
 +
 +
==Black==
 +
{|style="border: 1px solid #000000; text-align:center; font-family: Consolas, monaco, monospace;" width="250px"
 +
|-
 +
!HTML 256
 +
!ANSI 16
 +
|-
 +
|width="150px" style="background: #000000; color: #ffffff;"|#000000
 +
|width="100px" style="background: #000000; color: #ffffff;"|%xx
 +
|-
 +
|style="background: #808080; color: #000000;"|#808080
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #005f00; color: #000000;"|#005f00
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #005f5f; color: #000000;"|#005f5f
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #005f87; color: #000000;"|#005f87
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #00875f; color: #000000;"|#00875f
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #5f5f00; color: #000000;"|#5f5f00
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #5f5f5f; color: #000000;"|#808080
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #5f5f87; color: #000000;"|#5f5f87
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #5f875f; color: #000000;"|#5f875f
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #5f8787; color: #000000;"|#5f8787
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #875f00; color: #000000;"|#875f00
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #875f5f; color: #000000;"|#875f5f
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #875f87; color: #000000;"|#875f87
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #875faf; color: #000000;"|#875faf
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #87875f; color: #000000;"|#87875f
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #878787; color: #000000;"|#878787
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #080808; color: #ffffff;"|#080808
 +
|style="background: #000000; color: #ffffff;"|%xx
 +
|-
 +
|style="background: #121212; color: #ffffff;"|#121212
 +
|style="background: #000000; color: #ffffff;"|%xx
 +
|-
 +
|style="background: #1c1c1c; color: #ffffff;"|#1c1c1c
 +
|style="background: #000000; color: #ffffff;"|%xx
 +
|-
 +
|style="background: #262626; color: #ffffff;"|#262626
 +
|style="background: #000000; color: #ffffff;"|%xx
 +
|-
 +
|style="background: #303030; color: #000000;"|#303030
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #3a3a3a; color: #000000;"|#3a3a3a
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #444444; color: #000000;"|#444444
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #4e4e4e; color: #000000;"|#4e4e4e
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #585858; color: #000000;"|#585858
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #606060; color: #000000;"|#606060
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #666666; color: #000000;"|#666666
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #767676; color: #000000;"|#767676
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|style="background: #808080; color: #000000;"|#808080
 +
|style="background: #808080; color: #000000;"|%xh%xx
 +
|-
 +
|}
 +
 +
 +
==White==
 +
{|style="border: 1px solid #000000; text-align:center; font-family: Consolas, monaco, monospace;" width="250px"
 +
|-
 +
!HTML 256
 +
!ANSI 16
 +
|-
 +
|width="150px"
 +
|width="100px"
 +
|-
 +
|style="background: #8a8a8a; color: #000000;"|#8a8a8a
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #949494; color: #000000;"|#949494
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #9e9e9e; color: #000000;"|#9e9e9e
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #a8a8a8; color: #000000;"|#a8a8a8
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #b2b2b2; color: #000000;"|#b2b2b2
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #bcbcbc; color: #000000;"|#bcbcbc
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #c6c6c6; color: #000000;"|#c6c6c6
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #d0d0d0; color: #000000;"|#d0d0d0
 +
|style="background: #c0c0c0; color: #000000;"|%xw
 +
|-
 +
|style="background: #dadada; color: #000000;"|#dadada
 +
|style="background: #ffffff; color: #000000;"|%xh%xw
 +
|-
 +
|style="background: #e4e4e4; color: #000000;"|#e4e4e4
 +
|style="background: #ffffff; color: #000000;"|%xh%xw
 +
|-
 +
|style="background: #eeeeee; color: #000000;"|#eeeeee
 
|style="background: #ffffff; color: #000000;"|%xh%xw
 
|style="background: #ffffff; color: #000000;"|%xh%xw
 
|}
 
|}

Revision as of 08:14, 25 December 2016


This is a list of color codes, and how the HTML 256 corresponds to the ANSI 16, so if you want a color, you can see how it will show to people whether they're using 256 color or not.

The upper section shows all of the colours, and gradients. The bottom section shows the same colours, separated out into which display as which ANSI 16 equivalent.


To set yourself so you can see color in general, it is:

@set me=ansi

To set yourself to see 256 Color:

@set me=color256

To set yourself to only see ANSI 16 colors:

@set me=!color256


HTML 256 ANSI 16 HTML 256 ANSI 16
#000000 %xx #808080 %xh%xx
#800000 %xr #ff0000 %xh%xr
#008000 %xg #00ff00 %xh%xg
#808000 %xy #ffff00 %xh%xy
#000080 %xb #0000ff %xh%xb
#800080 %xm #ff00ff %xh%xm
#008080 %xc #00ffff %xh%xc
#c0c0c0 %xw #ffffff %xh%xw


List by Gradient

HTML 256 ANSI 16
#080808 %xx
#121212 %xx
#1c1c1c %xx
#262626 %xx
#303030 %xh%xx
#3a3a3a %xh%xx
#444444 %xh%xx
#4e4e4e %xh%xx
#585858 %xh%xx
#606060 %xh%xx
#666666 %xh%xx
#767676 %xh%xx
#808080 %xh%xx
#8a8a8a %xw
#949494 %xw
#9e9e9e %xw
#a8a8a8 %xw
#b2b2b2 %xw
#bcbcbc %xw
#c6c6c6 %xw
#d0d0d0 %xw
#dadada %xh%xw
#e4e4e4 %xh%xw
#eeeeee %xh%xw


HTML 256 ANSI 16 HTML 256 ANSI 16 HTML 256 ANSI 16
#000000 %xx #5f0000 %xr #870000 %xr
#00005f %xb #5f005f %xm #87005f %xm
#000087 %xb #5f0087 %xm #870087 %xm
#0000af %xb #5f00af %xm #8700af %xm
#0000d7 %xb #5f00d7 %xb #8700d7 %xm
#0000ff %xb #5f00ff %xb #8700ff %xm
#005f00 %xh%xx #5f5f00 %xh%xx #875f00 %xh%xx
#005f5f %xh%xx #5f5f5f %xh%xx #875f5f %xh%xx
#005f87 %xh%xx #5f5f87 %xh%xx #875f87 %xh%xx
#005faf %xh%xb #5f5faf %xh%xb #875faf %xh%xx
#005fd7 %xh%xb #5f5fd7 %xh%xb #875fd7 %xh%xb
#005fff %xh%xb #5f5fff %xh%xb #875fff %xh%xb
#008700 %xg #5f8700 %xg #878700 %xy
#00875f %xh%xx #5f875f %xh%xx #87875f %xh%xx
#008787 %xc #5f8787 %xh%xx #878787 %xh%xx
#0087af %xc #5f87af %xh%xb #8787af %xw
#0087d7 %xc #5f87d7 %xh%xb #8787d7 %xh%xb
#0087ff %xh%xb #5f87ff %xh%xb #8787ff %xh%xb
#00af00 %xg #5faf00 %xg #87af00 %xy
#00af5f %xg #5faf5f %xg #87af5f %xw
#00af87 %xc #5faf87 %xw #87af87 %xw
#00afaf %xc #5fafaf %xc #87afaf %xw
#00afd7 %xc #5fafd7 %xc #87afd7 %xw
#00afff %xc #5fafff %xc #87afff %xw
#00d700 %xg #5fd700 %xy #87d700 %xy
#00d75f %xc #5fd75f %xh%xg #87d75f %xh%xg
#00d787 %xc #5fd787 %xh%xg #87d787 %xw
#00d7af %xc #5fd7af %xw #87d7af %xw
#00d7d7 %xc #5fd7d7 %xh%xc #87d7d7 %xw
#00d7ff %xc #5fd7ff %xh%xc #87d7ff %xh%xc
#00ff00 %xh%xg #5fff00 %xh%xg #87ff00 %xh%xg
#00ff5f %xh%xg #5fff5f %xh%xg #87ff5f %xh%xg
#00ff87 %xh%xg #5fff87 %xh%xg #87ff87 %xh%xg
#00ffaf %xh%xc #5fffaf %xh%xc #87ffaf %xh%xg
#00ffd7 %xh%xc #5fffd7 %xh%xc #87ffd7 %xh%xc
#00ffff %xh%xc #5fffff %xh%xc #87ffff %xh%xc
#af0000 %xr #d70000 %xr #ff0000 %xr
#af005f %xm #d7005f %xr #ff005f %xr
#af0087 %xm #d70087 %xm #ff0087 %xm
#af00af %xm #d700af %xm #ff00af %xm
#af00d7 %xm #d700d7 %xm #ff00d7 %xm
#af00ff %xm #d700ff %xm #ff00ff %xm
#af5f00 %xh%xr #d75f00 %xh%xr #ff5f00 %xh%xr
#af5f5f %xh%xr #d75f5f %xh%xr #ff5f5f %xh%xr
#af5f87 %xh%xr #d75f87 %xh%xr #ff5f87 %xh%xr
#af5faf %xh%xm #d75faf %xh%xm #ff5faf %xh%xm
#af5fd7 %xh%xm #d75fd7 %xh%xm #ff5fd7 %xh%xm
#af5fff %xh%xm #d75fff %xh%xm #ff5fff %xh%xm
#af8700 %xy #d78700 %xy #ff8700 %xy
#af875f %xh%xr #d7875f %xh%xr #ff875f %xh%xr
#af8787 %xw #d78787 %xh%xr #ff8787 %xh%xr
#af87af %xw #d787af %xw #ff87af %xw
#af87d7 %xw #d787d7 %xw #ff87d7 %xh%xm
#af87ff %xh%xm #d787ff %xh%xm #ff87ff %xh%xm
#afaf00 %xy #d7af00 %xy #ffaf00 %xy
#afaf5f %xw #d7af5f %xy #ffaf5f %xy
#afaf87 %xw #d7af87 %xw #ffaf87 %xw
#afafaf %xw #d7afaf %xw #ffafaf %xw
#afafd7 %xw #d7afd7 %xw #ffafd7 %xw
#afafff %xw #d7afff %xw #ffafff %xw
#afd700 %xy #d7d700 %xy #ffd700 %xh%xy
#afd75f %xw #d7d75f %xh%xy #ffd75f %xh%xy
#afd787 %xw #d7d787 %xw #ffd787 %xh%xy
#afd7af %xw #d7d7af %xw #ffd7af %xh%xw
#afd7d7 %xw #d7d7d7 %xw #ffd7d7 %xh%xw
#afd7ff %xw #d7d7ff %xh%xw #ffd7ff %xh%xw
#afff00 %xh%xy #d7ff00 %xh%xy #ffff00 %xh%xy
#afff5f %xh%xy #d7ff5f %xh%xy #ffff5f %xh%xy
#afff87 %xh%xg #d7ff87 %xh%xy #ffff87 %xh%xy
#afffaf %xh%xw #d7ffaf %xh%xw #ffffaf %xh%xw
#afffd7 %xh%xw #d7ffd7 %xh%xw #ffffd7 %xh%xw
#afffff %xh%xw #d7ffff %xh%xw #ffffff %xh%xw


List by Colour

For ease of use, the colours above are separated here by which ANSI 16 colours they correspond to.

Black

HTML 256 ANSI 16
#000000 %xx
#808080 %xh%xx
#005f00 %xh%xx
#005f5f %xh%xx
#005f87 %xh%xx
#00875f %xh%xx
#5f5f00 %xh%xx
#808080 %xh%xx
#5f5f87 %xh%xx
#5f875f %xh%xx
#5f8787 %xh%xx
#875f00 %xh%xx
#875f5f %xh%xx
#875f87 %xh%xx
#875faf %xh%xx
#87875f %xh%xx
#878787 %xh%xx
#080808 %xx
#121212 %xx
#1c1c1c %xx
#262626 %xx
#303030 %xh%xx
#3a3a3a %xh%xx
#444444 %xh%xx
#4e4e4e %xh%xx
#585858 %xh%xx
#606060 %xh%xx
#666666 %xh%xx
#767676 %xh%xx
#808080 %xh%xx


White

HTML 256 ANSI 16
width="150px" width="100px"
#8a8a8a %xw
#949494 %xw
#9e9e9e %xw
#a8a8a8 %xw
#b2b2b2 %xw
#bcbcbc %xw
#c6c6c6 %xw
#d0d0d0 %xw
#dadada %xh%xw
#e4e4e4 %xh%xw
#eeeeee %xh%xw
Retrieved from "http://fatesharvest.com/wiki/index.php?title=HTML_256_to_ANSI_16&oldid=3981"