LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




Auto-Generated

Set the number and the mode to generae a list of colors

Full Color (default) Grayscale Pastel

Custom

CSS
#root
{
  width : 100%;
  height : 100%;
  display : flex;
  flex-direction : column;
  align-items : center;
  font-family : 'Roboto', sans-serif;
}

.multi_color_picker
{
  display : flex;
  flex-direction : row;
}

.color_square
{
  cursor : pointer;
  border-radius : 5px;
  width : 25px;
  height : 25px;
  color : gray;
  margin-right : 5px;
  display : flex;
  justify-content : center;
  align-items : center;
}

.color_square.dark
{
  color : white;
}

.color_square.border
{
  box-sizing: border-box;
  border : 1px solid rgba(0,0,0,.2);
}

.color_square.fade
{
  opacity : .3;
}
JS
const cssColorNames = {
  "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",
  "darkgrey": "#a9a9a9",
  "darkkhaki": "#bdb76b",
  "darkmagenta": "#8b008b",
  "darkolivegreen": "#556b2f",
  "darkorange": "#ff8c00",
  "darkorchid": "#9932cc",
  "darkred": "#8b0000",
  "darksalmon": "#e9967a",
  "darkseagreen": "#8fbc8f",
  "darkslateblue": "#483d8b",
  "darkslategray": "#2f4f4f",
  "darkslategrey": "#2f4f4f",
  "darkturquoise": "#00ced1",
  "darkviolet": "#9400d3",
  "deeppink": "#ff1493",
  "deepskyblue": "#00bfff",
  "dimgray": "#696969",
  "dimgrey": "#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",
  "grey": "#808080",
  "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",
  "lightgrey": "#d3d3d3",
  "lightpink": "#ffb6c1",
  "lightsalmon": "#ffa07a",
  "lightseagreen": "#20b2aa",
  "lightskyblue": "#87cefa",
  "lightslategray": "#778899",
  "lightslategrey": "#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",
  "rebeccapurple": "#663399",
  "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",
  "slategrey": "#708090",
  "snow": "#fffafa",
  "springgreen": "#00ff7f",
  "steelblue": "#4682b4",
  "tan": "#d2b48c",
  "teal": "#008080",
  "thistle": "#d8bfd8",
  "tomato": "#ff6347",
  "turquoise": "#40e0d0",
  "violet": "#ee82ee",
  "wheat": "#f5deb3",
  "white": "#ffffff",
  "whitesmoke": "#f5f5f5",
  "yellow": "#ffff00",
  "yellowgreen": "#9acd32"
};

function numToString(num, radix, size){
  return ("0".repeat(size) + Math.round(num).toString(radix)).slice(-size);
}

function getColorComponent(freq, incr, ampl, center, phase){
  return Math.sin( freq * incr + phase ) * ampl + center
}

function getLuminosity(r, g, b){
  // Normalize sRGB to RGB
  r /= 255;
  g /= 255;
  b /= 255;
  r = r < 0.03928 ? r / 12.92 : Math.pow(( r + 0.055)/1.055, 2.4);
  g = g < 0.03928 ? g / 12.92 : Math.pow(( g + 0.055)/1.055, 2.4);
  b = b < 0.03928 ? b / 12.92 : Math.pow(( b + 0.055)/1.055, 2.4);
  // Calculate Luminosity
  let L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  return L;
}

function gradient(num, amplitude, center, fr, fg, fb, pr, pg, pb){
  // Clamp the amount
  num = Math.min(Math.max(2, num), 256);
  let colors = []
  
  for(let i = 0; i < num; i++){
    let r = getColorComponent(fr, i, amplitude, center, pr),
        g = getColorComponent(fg, i, amplitude, center, pg),
        b = getColorComponent(fb, i, amplitude, center, pb);
    let dark = true,
        border = false;
    // console.log(getLuminosity(r, g, b))
    // console.log(r,g,b)
    let luminosity = getLuminosity(r, g, b);
    if(luminosity >= .86)
      border = true;
    if(luminosity >= .6)
      dark = false;
    // console.log(r,g,b)
    let hex = `#${numToString((r << 16) + (g << 8) + b, 16, 6)}`
    // console.log(hex)
    colors.push({value : hex, dark, border, selected : false});
  }
  return colors;
}

// console.log(gradient(5));

Vue.component("colorPicker",{
  template : "#colorPicker",
  props : {
    mode : {
      type : String
    },
    number : {
      type : Number
    },
    colors : {
      type : Array
    }
  },
  data : function(){
    return { 
      color_list : [],
      limit : 5,
      selected : 0
    }
  },
  methods : {
    toggleColor : function(color){
      if(!color.selected)
         if(this.selected == this.limit)
           return;
      color.selected = !color.selected;
      if(color.selected)
        this.selected++;
      else
        this.selected--;
    }
  },
  mounted : function(){
    if(this.colors && this.colors.length){
      // console.log(this.colors);
      this.color_list = this.colors.map(c=>{
        // Get the hex value from css color name 
        let value = cssColorNames[c] || c;
        return {value : c, selected : false, dark : false, border : false}
      })
      return;
    }else{
      let fr = Math.PI / 2 / (this.number - 1), 
          fg = Math.PI / 2 / (this.number - 1), 
          fb = Math.PI / 2 / (this.number - 1);
      let pr = 0 * Math.PI / 3,
          pg = 2 * Math.PI / 3,
          pb = 4 * Math.PI / 3;
      switch(this.mode){
        case "grayscale":
          this.color_list = gradient(this.number, 255, 0, fr, fg, fb, 0, 0, 0);
          break;
        case "pastel":
            this.color_list = gradient(this.number, 55, 200, fr, fg, fb, pr, pg, pb);
            break;
        default:
          this.color_list = gradient(this.number, 127, 128, fr, fg, fb, pr, pg, pb);
          break;
      }
    }
  }
});

let app = new Vue({
  el : "#root",
  data : {
    // Using css colors
    myColors : ["red", "orange", "yellow", "green", "blue", "indigo" , "violet", "white", "gray", "black"]
  }
})
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv