Stygian Blue's Sandbox


This Sandbox is now out of use. The new Sandbox can be found here.



0


— Full Spectrum Hex Catalogue —


    • _
    HEX.png

    660066
    cc00cc
    ff00ff
    ff66ff
    ff99ff
    ffccff
    ff99cc
    ff66cc
    ff33cc
    cc0099
    800080
    990099
    cc3399
    ff3399
    ff6699
    ff0066
    d60093
    993366
    660033
    cc0066
    990033

    • _
    HEX.png

    a50021
    cc0000
    ff5050
    ff7c80
    ff9999
    ffcccc
    ffcc99
    ff9966
    ff6600
    ff0000
    800000
    990000
    ff3300
    ff9933
    ffcc66
    ffcc00
    cc6600
    993300
    cc3300
    ff9900
    996600

    • _
    HEX.png

    663300
    cc9900
    ffff00
    ffff66
    ffff99
    ffffcc
    ccff99
    ccff6
    ccff33
    cccc00
    996633
    808000
    99cc00
    99ff33
    99ff66
    66ff33
    669900
    666633
    333300
    009900
    336600

    • _
    HEX.png

    003300
    008000
    33cc33
    66ff66
    99ff99
    ccffcc
    99ffcc
    ccff99
    00ff00
    00cc00
    006600
    339933
    00cc66
    00ff99
    66ffcc
    00ffcc
    00cc99
    339966
    008080
    009999
    006666

    • _
    HEX.png

    003366
    006699
    33cccc
    00ffff
    66ffff
    ccffff
    66ccff
    33ccff
    00ccff
    0099cc
    336699
    3366cc
    0066cc
    0099ff
    3399ff
    0066ff
    0033ff
    0033cc
    003399
    000099
    0000ff
    0000cc

    • _
    HEX.png

    000066
    3333ff
    3366ff
    6699ff
    99ccff
    ccecff
    ccccff
    9999ff
    6666ff
    3333cc
    333399
    666699
    6600ff
    9966ff
    cc99ff
    cc66ff
    9933ff
    6600cc
    9900ff
    cc00ff
    9900cc


— Code —


3

This is an example colourful sentence.
This is an example colourful sentence.
This is an example colourful sentence.

This colour blends in with the top of a page.
This colour blends in with the middle and bottom of a page.

Using div
allows for multiple lines
of the same colour.

##a50021|This is an example colourful sentence.##
##008000|This is an example colourful sentence.##
##009999|This is an example colourful sentence.##

##ecf2ee|This colour blends in with the top of a page.##
##fcfcfc|This colour blends in with the middle and bottom of a page.##

[[div style="color:#ff0055;"]]
Using div
allows for multiple lines
of the same colour.
[[/div]]
    • _

    — How Hex Codes Work —


    4
    Numbers run 0-9, letters run A-F. The letters are stand-ins for numbers, letting us use base 16 instead of base 10. (E.g., think of "A" as the number 10, "B" as 11, and so on). Finally, the first number is more important than the second number in any given pair. The closer a code is to #000000, the closer it is to black; the closer it is to #ffffff, the closer it is to white.
    If you want to know how to convert to RGB on your own: multiply the first digit in a pair by 16 and the second by 1, then sum the products to get the amount of R, G, or B that that pair represents. Doing this for all three pairs in a hex code gives you the full RGB for that code!
    Take this hex code for example: #0b0143.

    - The first pair of letters/numbers (0b) refers to how much Red there is. Without calculating, we can already see that there is not much Red here.
    - The second pair of letters/numbers (01) refers to how much Green there is. There is barely any Green in this colour.
    - The third pair of letters/numbers (43) refers to how much Blue there is. There is quite a bit of Blue in this colour.

    Indeed, if we check, our observations are accurate:

    220.png

    Knowing how hex codes work allows you to make good codes, accurately assess changes in hex values, and to make on-the-fly edits of site colours without the use of special tools.

    Now you know how to read hex codes (and edit them accurately)!
    4


— Common Links —


5
- Colour Inspiration: [Common Hex Values]
- HEX to RGB / RGB to HEX: [HEX/RGB RapidTable]
- Accessibility / Contrast Checker: [Accessibility & Contrast Checker].

This is an example of how you can hide fcfcfc text against fcfcfc background. Well done finding this!
5

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License