Search code examples
visual-studiocolorshexcolor-picker

All Microsoft Standard Colors In Hex


Recently I've been converting a Visual Studio (C#) Project to the web. One of the features involved the ability to select from the MS Standard palette.

So I need a list of the MS Standard Colors in Hex.


Solution

  • After searching I couldn't find a list of these ARGB colours in hex so I wrote a bit of JS to convert them for me.

    I figure I can't be the only person who needs these, so here you go!

    AliceBlue #F0F8FF

    AntiqueWhite #FAEBD7

    Aqua #00FFFF

    Aquamarine #7FFFD4

    Azure #F0FFFF

    Beige #F5F5DC

    Bisque #FFE4C4

    Black #000000

    BlanchedAlmond #FFEBCD

    Blue #0000FF

    BlueViolet #8A2BE2

    Brown #A52A2A

    BurlyWood #DEB887

    CadetBlue #5F9EA0

    Chartreuse #7FFF00

    Chocolate #D2691E

    Coral #FF7F50

    CornflowerBlue #6495ED

    Cornsilk #FFF8DC

    Crimson #DC143C

    Cyan #00FFFF

    DarkBlue #00008B

    DarkCyan #008B8B

    DarkGoldenrod #B8860B

    DarkGray #A9A9A9

    DarkGreen #006400

    DarkKhaki #BDB76B

    DarkMagenta #8B008B

    DarkOliveGreen #556B2F

    DarkOrange #FF8C00

    DarkOrchid #9932CC

    DarkRed #8B0000

    DarkSalmon #E9967A

    DarkSeaGreen #8FBC8F

    DarkSlateBlue #483D8B

    DarkSlateGray #2F4F4F

    DarkTurquoise #00CED1

    DarkViolet #9400D3

    DeepPink #FF1493

    DeepSkyBlue #00BFFF

    DimGray #696969

    DodgerBlue #1E90FF

    Firebrick #B22222

    FloralWhite #FFFAF0

    ForestGreen #228B22

    Fuchsia #FF00FF

    Gainsboro #DCDCDC

    GhostWhite #F8F8FF

    Gold #FFD700

    Goldenrod #DAA520

    Gray #808080

    Green #008000

    GreenYellow #ADFF2F

    Honeydew #F0FFF0

    HotPink #FF69B4

    IndianRed #CD5C5C

    Indigo #4B0082

    Ivory #FFFFF0

    Khaki #F0E68C

    Lavender #E6E6FA

    LavenderBlush #FFF0F5

    LawnGreen #7CFC00

    LemonChiffon #FFFACD

    LightBlue #ADD8E6

    LightCoral #F08080

    LightCyan #E0FFFF

    LightGoldenrodYellow #FAFAD2

    LightGray #D3D3D3

    LightGreen #90EE90

    LightPink #FFB6C1

    LightSalmon #FFA07A

    LightSeaGreen #20B2AA

    LightSkyBlue #87CEFA

    LightSlateGray #778899

    LightSteelBlue #B0C4DE

    LightYellow #FFFFE0

    Lime #00FF00

    LimeGreen #32CD32

    Linen #FAF0E6

    Magenta #FF00FF

    Maroon #800000

    MediumAquamarine #66CDAA

    MediumBlue #0000CD

    MediumOrchid #BA55D3

    MediumPurple #9370DB

    MediumSeaGreen #3CB371

    MediumSlateBlue #7B68EE

    MediumSpringGreen #00FA9A

    MediumTurquoise #48D1CC

    MediumVioletRed #C71585

    MidnightBlue #191970

    MintCream #F5FFFA

    MistyRose #FFE4E1

    Moccasin #FFE4B5

    NavajoWhite #FFDEAD

    Navy #000080

    OldLace #FDF5E6

    Olive #808000

    OliveDrab #6B8E23

    Orange #FFA500

    OrangeRed #FF4500

    Orchid #DA70D6

    PaleGoldenrod #EEE8AA

    PaleGreen #98FB98

    PaleTurquoise #AFEEEE

    PaleVioletRed #DB7093

    PapayaWhip #FFEFD5

    PeachPuff #FFDAB9

    Peru #CD853F

    Pink #FFC0CB

    Plum #DDA0DD

    PowderBlue #B0E0E6

    Purple #800080

    Red #FF0000

    RosyBrown #BC8F8F

    RoyalBlue #4169E1

    SaddleBrown #8B4513

    Salmon #FA8072

    SandyBrown #F4A460

    SeaGreen #2E8B57

    SeaShell #FFF5EE

    Sienna #A0522D

    Silver #C0C0C0

    SkyBlue #87CEEB

    SlateBlue #6A5ACD

    SlateGray #708090

    Snow #FFFAFA

    SpringGreen #00FF7F

    SteelBlue #4682B4

    Tan #D2B48C

    Teal #008080

    Thistle #D8BFD8

    Tomato #FF6347

    Transparent none

    Turquoise #40E0D0

    Violet #EE82EE

    Wheat #F5DEB3

    White #FFFFFF

    WhiteSmoke #F5F5F5

    Yellow #FFFF00

    YellowGreen #9ACD32

    Or as a block of CSS Classes:

    .AliceBlue{background-color:#F0F8FF;}
    .AntiqueWhite{background-color:#FAEBD7;}
    .Aqua{background-color:#00FFFF;}
    .Aquamarine{background-color:#7FFFD4;}
    .Azure{background-color:#F0FFFF;}
    .Beige{background-color:#F5F5DC;}
    .Bisque{background-color:#FFE4C4;}
    .Black{background-color:#000000;}
    .BlanchedAlmond{background-color:#FFEBCD;}
    .Blue{background-color:#0000FF;}
    .BlueViolet{background-color:#8A2BE2;}
    .Brown{background-color:#A52A2A;}
    .BurlyWood{background-color:#DEB887;}
    .CadetBlue{background-color:#5F9EA0;}
    .Chartreuse{background-color:#7FFF00;}
    .Chocolate{background-color:#D2691E;}
    .Coral{background-color:#FF7F50;}
    .CornflowerBlue{background-color:#6495ED;}
    .Cornsilk{background-color:#FFF8DC;}
    .Crimson{background-color:#DC143C;}
    .Cyan{background-color:#00FFFF;}
    .DarkBlue{background-color:#00008B;}
    .DarkCyan{background-color:#008B8B;}
    .DarkGoldenrod{background-color:#B8860B;}
    .DarkGray{background-color:#A9A9A9;}
    .DarkGreen{background-color:#006400;}
    .DarkKhaki{background-color:#BDB76B;}
    .DarkMagenta{background-color:#8B008B;}
    .DarkOliveGreen{background-color:#556B2F;}
    .DarkOrange{background-color:#FF8C00;}
    .DarkOrchid{background-color:#9932CC;}
    .DarkRed{background-color:#8B0000;}
    .DarkSalmon{background-color:#E9967A;}
    .DarkSeaGreen{background-color:#8FBC8F;}
    .DarkSlateBlue{background-color:#483D8B;}
    .DarkSlateGray{background-color:#2F4F4F;}
    .DarkTurquoise{background-color:#00CED1;}
    .DarkViolet{background-color:#9400D3;}
    .DeepPink{background-color:#FF1493;}
    .DeepSkyBlue{background-color:#00BFFF;}
    .DimGray{background-color:#696969;}
    .DodgerBlue{background-color:#1E90FF;}
    .Firebrick{background-color:#B22222;}
    .FloralWhite{background-color:#FFFAF0;}
    .ForestGreen{background-color:#228B22;}
    .Fuchsia{background-color:#FF00FF;}
    .Gainsboro{background-color:#DCDCDC;}
    .GhostWhite{background-color:#F8F8FF;}
    .Gold{background-color:#FFD700;}
    .Goldenrod{background-color:#DAA520;}
    .Gray{background-color:#808080;}
    .Green{background-color:#008000;}
    .GreenYellow{background-color:#ADFF2F;}
    .Honeydew{background-color:#F0FFF0;}
    .HotPink{background-color:#FF69B4;}
    .IndianRed{background-color:#CD5C5C;}
    .Indigo{background-color:#4B0082;}
    .Ivory{background-color:#FFFFF0;}
    .Khaki{background-color:#F0E68C;}
    .Lavender{background-color:#E6E6FA;}
    .LavenderBlush{background-color:#FFF0F5;}
    .LawnGreen{background-color:#7CFC00;}
    .LemonChiffon{background-color:#FFFACD;}
    .LightBlue{background-color:#ADD8E6;}
    .LightCoral{background-color:#F08080;}
    .LightCyan{background-color:#E0FFFF;}
    .LightGoldenrodYellow{background-color:#FAFAD2;}
    .LightGray{background-color:#D3D3D3;}
    .LightGreen{background-color:#90EE90;}
    .LightPink{background-color:#FFB6C1;}
    .LightSalmon{background-color:#FFA07A;}
    .LightSeaGreen{background-color:#20B2AA;}
    .LightSkyBlue{background-color:#87CEFA;}
    .LightSlateGray{background-color:#778899;}
    .LightSteelBlue{background-color:#B0C4DE;}
    .LightYellow{background-color:#FFFFE0;}
    .Lime{background-color:#00FF00;}
    .LimeGreen{background-color:#32CD32;}
    .Linen{background-color:#FAF0E6;}
    .Magenta{background-color:#FF00FF;}
    .Maroon{background-color:#800000;}
    .MediumAquamarine{background-color:#66CDAA;}
    .MediumBlue{background-color:#0000CD;}
    .MediumOrchid{background-color:#BA55D3;}
    .MediumPurple{background-color:#9370DB;}
    .MediumSeaGreen{background-color:#3CB371;}
    .MediumSlateBlue{background-color:#7B68EE;}
    .MediumSpringGreen{background-color:#00FA9A;}
    .MediumTurquoise{background-color:#48D1CC;}
    .MediumVioletRed{background-color:#C71585;}
    .MidnightBlue{background-color:#191970;}
    .MintCream{background-color:#F5FFFA;}
    .MistyRose{background-color:#FFE4E1;}
    .Moccasin{background-color:#FFE4B5;}
    .NavajoWhite{background-color:#FFDEAD;}
    .Navy{background-color:#000080;}
    .OldLace{background-color:#FDF5E6;}
    .Olive{background-color:#808000;}
    .OliveDrab{background-color:#6B8E23;}
    .Orange{background-color:#FFA500;}
    .OrangeRed{background-color:#FF4500;}
    .Orchid{background-color:#DA70D6;}
    .PaleGoldenrod{background-color:#EEE8AA;}
    .PaleGreen{background-color:#98FB98;}
    .PaleTurquoise{background-color:#AFEEEE;}
    .PaleVioletRed{background-color:#DB7093;}
    .PapayaWhip{background-color:#FFEFD5;}
    .PeachPuff{background-color:#FFDAB9;}
    .Peru{background-color:#CD853F;}
    .Pink{background-color:#FFC0CB;}
    .Plum{background-color:#DDA0DD;}
    .PowderBlue{background-color:#B0E0E6;}
    .Purple{background-color:#800080;}
    .Red{background-color:#FF0000;}
    .RosyBrown{background-color:#BC8F8F;}
    .RoyalBlue{background-color:#4169E1;}
    .SaddleBrown{background-color:#8B4513;}
    .Salmon{background-color:#FA8072;}
    .SandyBrown{background-color:#F4A460;}
    .SeaGreen{background-color:#2E8B57;}
    .SeaShell{background-color:#FFF5EE;}
    .Sienna{background-color:#A0522D;}
    .Silver{background-color:#C0C0C0;}
    .SkyBlue{background-color:#87CEEB;}
    .SlateBlue{background-color:#6A5ACD;}
    .SlateGray{background-color:#708090;}
    .Snow{background-color:#FFFAFA;}
    .SpringGreen{background-color:#00FF7F;}
    .SteelBlue{background-color:#4682B4;}
    .Tan{background-color:#D2B48C;}
    .Teal{background-color:#008080;}
    .Thistle{background-color:#D8BFD8;}
    .Tomato{background-color:#FF6347;}
    .Transparent{background-color:none;}
    .Turquoise{background-color:#40E0D0;}
    .Violet{background-color:#EE82EE;}
    .Wheat{background-color:#F5DEB3;}
    .White{background-color:#FFFFFF;}
    .WhiteSmoke{background-color:#F5F5F5;}
    .Yellow{background-color:#FFFF00;}
    .YellowGreen{background-color:#9ACD32;}
    

    Code to convert ARGB to HEX

    if (!Array.prototype.forEach)
    {
      Array.prototype.forEach = function(fun /*, thisp*/)
      {
        var len = this.length;
        if (typeof fun != "function")
          throw new TypeError();
    
        var thisp = arguments[1];
        for (var i = 0; i < len; i++)
        {
          if (i in this)
            fun.call(thisp, this[i], i, this);
        }
      };
    }
    
    
    var colors;
    colors = new Array; 
    
    colors.push("#FFF0F8FF","#FFFAEBD7","#FF00FFFF","#FF7FFFD4","#FFF0FFFF","#FFF5F5DC","#FFFFE4C4","#FF000000","#FFFFEBCD","#FF0000FF","#FF8A2BE2","#FFA52A2A","#FFDEB887","#FF5F9EA0","#FF7FFF00","#FFD2691E","#FFFF7F50","#FF6495ED","#FFFFF8DC","#FFDC143C","#FF00FFFF","#FF00008B","#FF008B8B","#FFB8860B","#FFA9A9A9","#FF006400","#FFBDB76B","#FF8B008B","#FF556B2F","#FFFF8C00","#FF9932CC","#FF8B0000","#FFE9967A","#FF8FBC8F","#FF483D8B","#FF2F4F4F","#FF00CED1","#FF9400D3","#FFFF1493","#FF00BFFF","#FF696969","#FF1E90FF","#FFB22222","#FFFFFAF0","#FF228B22","#FFFF00FF","#FFDCDCDC","#FFF8F8FF","#FFFFD700","#FFDAA520","#FF808080","#FF008000","#FFADFF2F","#FFF0FFF0","#FFFF69B4","#FFCD5C5C","#FF4B0082","#FFFFFFF0","#FFF0E68C","#FFE6E6FA","#FFFFF0F5","#FF7CFC00","#FFFFFACD","#FFADD8E6","#FFF08080","#FFE0FFFF","#FFFAFAD2","#FFD3D3D3","#FF90EE90","#FFFFB6C1","#FFFFA07A","#FF20B2AA","#FF87CEFA","#FF778899","#FFB0C4DE","#FFFFFFE0","#FF00FF00","#FF32CD32","#FFFAF0E6","#FFFF00FF","#FF800000","#FF66CDAA","#FF0000CD","#FFBA55D3","#FF9370DB","#FF3CB371","#FF7B68EE","#FF00FA9A","#FF48D1CC","#FFC71585","#FF191970","#FFF5FFFA","#FFFFE4E1","#FFFFE4B5","#FFFFDEAD","#FF000080","#FFFDF5E6","#FF808000","#FF6B8E23","#FFFFA500","#FFFF4500","#FFDA70D6","#FFEEE8AA","#FF98FB98","#FFAFEEEE","#FFDB7093","#FFFFEFD5","#FFFFDAB9","#FFCD853F","#FFFFC0CB","#FFDDA0DD","#FFB0E0E6","#FF800080","#FFFF0000","#FFBC8F8F","#FF4169E1","#FF8B4513","#FFFA8072","#FFF4A460","#FF2E8B57","#FFFFF5EE","#FFA0522D","#FFC0C0C0","#FF87CEEB","#FF6A5ACD","#FF708090","#FFFFFAFA","#FF00FF7F","#FF4682B4","#FFD2B48C","#FF008080","#FFD8BFD8","#FFFF6347","","#FF40E0D0","#FFEE82EE","#FFF5DEB3","#FFFFFFFF","#FFF5F5F5","#FFFFFF00","#FF9ACD32")
    
    var newColor = "";
    
    function switchColor(element, index, array) {
       newColor += '#' + element.substring(3) + ','; 
    }
    
    colors.forEach(switchColor);