Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generate random colors in Sass. Article - http://pankajparashar.com/posts/random-colors-sass/
.random-color {
border-top-color: "LightCoral";
border-right-color: #a44b58;
border-bottom-color: rgb(108, 188, 134);
border-left-color: rgb(24%, 88%, 5%);
outline-top-color: hsl(88, 69%, 69%);
outline-right-color: rgba(220, 71, 132, 0.69);
outline-bottom-color: rgba(79%, 47%, 14%, 0.37);
outline-left-color: hsla(111, 31%, 38%, 0.86);
}
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----
$named-colors: 'AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure', 'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Chartreuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'Crimson', 'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGrey', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'Darkorange', 'DarkOrchid', 'DarkRed', 'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray', 'DarkSlateGrey', 'DarkTurquoise', 'DarkViolet', 'DeepPink', 'DeepSkyBlue', 'DimGray', 'DimGrey', 'DodgerBlue', 'FireBrick', 'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro', 'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Grey', 'Green', 'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo', 'Ivory', 'Khaki', 'Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'LightGray', 'LightGrey', 'LightGreen', 'LightPink', 'LightSalmon', 'LightSeaGreen', 'LightSkyBlue', 'LightSlateGray', 'LightSlateGrey', 'LightSteelBlue', 'LightYellow', 'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon', 'MediumAquaMarine', 'MediumBlue', 'MediumOrchid', 'MediumPurple', 'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen', 'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue', 'MintCream', 'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive', 'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod', 'PaleGreen', 'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip', 'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'Red', 'RosyBrown', 'RoyalBlue', 'SaddleBrown', 'Salmon', 'SandyBrown', 'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue', 'SlateGray', 'SlateGrey', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan', 'Teal', 'Thistle', 'Tomato', 'Turquoise', 'Violet', 'Wheat', 'White', 'WhiteSmoke', 'Yellow', 'YellowGreen';
@function randomizeColor(){
$color: (
octal: (
red: random(256)-1,
green: random(256)-1,
blue: random(256)-1
),
percent: (
red: random(101)-1,
green: random(101)-1,
blue: random(101)-1,
saturation: random(101)-1,
light: random(101)-1
),
deg: (
hue: random(361)-1
),
fraction: (
alpha: random(100)/100
)
);
@return $color;
}
@function color($base, $component) {
$color: randomizeColor();
@return map-get(map-get($color, $base), $component);
}
@function getRandomColor($format: NULL) {
@if $format == "hex" {
@return rgb(color(octal, red), color(octal, green), color(octal, blue));
}
@else if $format == "rgb" {
@return unquote("rgb(#{color(octal, red)}, #{color(octal, green)}, #{color(octal, blue)})");
}
@else if $format == "%rgb" {
@return unquote("rgb(#{color(percent, red)}%, #{color(percent, green)}%, #{color(percent, blue)}%)");
}
@else if $format == "rgba" {
@return unquote("rgba(#{color(octal, red)}, #{color(octal, green)}, #{color(octal, blue)}, #{color(fraction, alpha)})");
}
@else if $format == "%rgba" {
@return unquote("rgba(#{color(percent, red)}%, #{color(percent, green)}%, #{color(percent, blue)}%, #{color(fraction, alpha)})");
}
@else if $format == "hsl" {
@return unquote("hsl(#{color(deg, hue)}, #{color(percent, saturation)}%, #{color(percent, light)}%)");
}
@else if $format == "hsla" {
@return unquote("hsla(#{color(deg, hue)}, #{color(percent, saturation)}%, #{color(percent, light)}%, #{color(fraction, alpha)})");
}
@else {
@return nth($named-colors, random(147));
}
}
.random-color {
border-top-color: getRandomColor();
border-right-color: getRandomColor("hex");
border-bottom-color: getRandomColor("rgb");
border-left-color: getRandomColor("%rgb");
outline-top-color: getRandomColor("hsl");
outline-right-color: getRandomColor("rgba");
outline-bottom-color: getRandomColor("%rgba");
outline-left-color: getRandomColor("hsla");
}
@kokuou

This comment has been minimized.

Copy link

@kokuou kokuou commented Jan 13, 2016

Just a quick note: colour names in CSS should not have quotes. I had to remove them to make use of this snippet (which was super useful by the way).

@yairEO

This comment has been minimized.

Copy link

@yairEO yairEO commented Feb 3, 2016

cool function!
but why would a developer or anyone care about the format of a color? it's totally not important when using SCSS

@Lokua

This comment has been minimized.

Copy link

@Lokua Lokua commented Feb 12, 2016

@yairEO - You could be passing the result of random color function to another function that works with say, rgba components but not hex, for example.

@kongkx

This comment has been minimized.

Copy link

@kongkx kongkx commented Apr 4, 2016

getRandomColor() should also add the function unquote to process the default output.

@function getRandomColor($format: NULL) {
  // codes before 
  @else { 
    @return unquote(nth($named-colors, random(147)));
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.