Color fan

Developer
David A.
Size
117,778 Kb
Views
16,192
  1. Color fan Previews
  2. Color fan HTML Codes
  3. Color fan CSS Codes
  4. Color fan JS Codes

How do I make an color fan?

Helps us pick nice colors for whatever at ginetta.net <3 http://ginetta.net/. What is a color fan? How do you make a color fan? This script and codes were developed by David A. on 28 November 2022, Monday.

Color fan Previews
IQ Test

Color fan - Script Codes HTML Codes

<!DOCTYPE html>
<html class="color-bg">
<head> <meta charset="UTF-8"> <title>color fan</title> <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="color"><i class="icon color-bg color gradient"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><path d="M8.5,80.1c0,0.5-0.2,0.9-0.5,1.3l-2.3,2.3c-1,1-1,2.6,0,3.5l7.1,7.1c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.3,1.8-0.7l2.3-2.3 c0.3-0.3,0.8-0.5,1.3-0.5c1.8,0,3.5-0.7,4.8-2l36.8-36.8l1.8,1.8h0c0.5,0.5,1.1,0.7,1.8,0.7c0,0,0,0,0,0c1.4,0,2.5-1.1,2.5-2.5 c0-0.7-0.3-1.3-0.7-1.8l24.6-24.6c4.9-4.9,4.9-12.8,0-17.7C89,6.3,85.8,5,82.5,5S76,6.3,73.7,8.7L49.1,33.2v0c-1-1-2.6-1-3.5,0 c-1,1-1,2.6,0,3.5l1.8,1.8L10.5,75.3C9.2,76.6,8.5,78.3,8.5,80.1z M77.2,12.2c1.4-1.4,3.3-2.2,5.3-2.2s3.9,0.8,5.3,2.2 c2.9,2.9,2.9,7.7,0,10.6L63.2,47.4L52.6,36.8L77.2,12.2z M11.6,84.9c1.3-1.3,2-3,2-4.8c0-0.5,0.2-0.9,0.5-1.3l36.8-36.8l7.1,7.1 L21.1,85.9c-0.3,0.3-0.8,0.5-1.3,0.5c-1.8,0-3.5,0.7-4.8,2L14.6,89L11,85.4L11.6,84.9z"/></svg></i><span class="js-title">color palette</span> <input class="color" id="hexval" type="text"/>
</h1>
<div class="fan js-fan"></div>
<div class="settings"><a class="js-toggle-settings close" href="#">✖</a><i class="input"> <label><strong>Start HUE</strong> <input id="hue" type="range" min="0" max="360" value="0" step="1"/> <output class="hue-val" for="hue">0</output> </label></i><i class="input"> <label><strong>Start color</strong> <input id="startcolor" type="text" placeholder="HEX, RGB, HSL, Name, HSV etc.."/> </label></i><i class="input"> <label><strong>Saturation</strong> <input id="saturation" type="range" min="1" max="100" value="100" step="1"/> <output class="saturation-val" for="saturation">100</output> </label></i><i class="input"> <label><strong>Lightness</strong> <input id="light" type="range" min="1" max="100" value="75" step="1"/> <output class="light-val" for="light">75</output> </label></i><i class="input"> <label><strong>Amount of colors</strong> <input id="colors" type="range" min="2" max="30" value="24" step="1"/> <output class="colors-val" for="colors">24</output> </label></i><i class="input"> <label><strong>Color Palette</strong> <input class="js-color-type" type="radio" name="colortype" value="huslp" checked="checked"/><i>HUSLp &nbsp;</i> </label> <label> <input class="js-color-type" type="radio" name="colortype" value="husl"/><i>HUSL &nbsp;</i> </label> <label> <input class="js-color-type" type="radio" name="colortype" value="hsl"/><i>HSL</i> </label> <label> <input class="js-color-type" type="radio" name="colortype" value="hcl"/><i>HCL</i> </label></i><i class="input export"> <label> <strong>JSON Export</strong> <textarea class="js-palette"></textarea> </label></i></div><a class="settings-link js-toggle-settings color-contrast" href="#"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="26" height="26" data-icon="cog" viewBox="0.8 -1.6 16.0 21.6"><path d="M7 0l-1 2-.906.313-2.094-.813-1.5 1.5.813 2.094-.313.906-2 1v2l2 1c.1.3.206.606.406.906l-.906 2.094 1.5 1.5 2.094-.813.906.313 1 2h2l1-2c.3-.1.606-.206.906-.406l2.094.813 1.5-1.5-.813-2.094c.1-.3.306-.606.406-.906l1.906-.906v-2l-2-1c-.1-.3-.206-.606-.406-.906l.906-2.094-1.5-1.5-2.094.813-.906-.313-1-2h-2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg></a> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://cdn.rawgit.com/husl-colors/husl/v5.0.3/husl.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/102565/tinycolor.js'></script>
<script src='http://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js'></script>
<script src='https://cdn.rawgit.com/dtao/nearest-color/master/nearestColor.js'></script>
<script src='js/vlvryw.js'></script> <script src="js/index.js"></script>
</body>
</html>

Color fan - Script Codes CSS Codes

html, body { height: 100%; overflow: hidden;
}
.color-contrast { color: #212121;
}
.bg-dark .color-contrast { color: #fff;
}
.color-contrast-bg { background-color: #212121;
}
.bg-dark .color-contrast-bg { background-color: #fff;
}
.color-bg { background-color: #fff;
}
.bg-dark .color-bg { background-color: #212121;
}
.color,
input[type=text].color { color: #fff;
}
.bg-dark .color, .bg-dark
input[type=text].color { color: #212121;
}
html { -webkit-transition: background-color 300ms 440ms ease-out; transition: background-color 300ms 440ms ease-out;
}
html.bg-dark { background: #2e2e2e;
}
body { overflow: hidden; font-family: Helvetica, Sans-serif;
}
.fan { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 2vh; height: 2vh; -webkit-perspective: 600; perspective: 600; -webkit-transition: 450ms -webkit-transform cubic-bezier(0.37, 0, 0.25, 0.98); transition: 450ms -webkit-transform cubic-bezier(0.37, 0, 0.25, 0.98); transition: 450ms transform cubic-bezier(0.37, 0, 0.25, 0.98); transition: 450ms transform cubic-bezier(0.37, 0, 0.25, 0.98), 450ms -webkit-transform cubic-bezier(0.37, 0, 0.25, 0.98);
}
.fan-page { cursor: pointer; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 40vh; width: 10vh; top: -40vh; left: 0; box-shadow: 0 0 20px rgba(33, 33, 33, 0.1); -webkit-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); -webkit-transform-origin: 1vh 39vh; transform-origin: 1vh 39vh; border-radius: .5vh; overflow: hidden; -webkit-transition: 200ms 200ms transform ease-in-out; transition: 200ms 200ms transform ease-in-out; box-sizing: border-box;
}
.fan-color { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; font-size: 1.3vh;
}
.fan-color span { position: relative; display: block; padding: .5rem; -webkit-transition: 200ms background-color ease-in; transition: 200ms background-color ease-in;
}
.fan-color a, .fan-color em { position: absolute; top: 100%; left: 0; right: 0; padding: .5rem; display: block; color: #fff; text-decoration: none; overflow: hidden; -webkit-transition: 200ms color ease-in; transition: 200ms color ease-in; font-style: normal;
}
.fan-color strong { display: block;
}
.settings-link { position: absolute; top: 1vh; right: 1vh; z-index: 20; width: 4.25vh; height: 4.25vh;
}
.settings-link svg { width: 100%; height: 100%; display: block;
}
.settings-link path { fill: currentColor; -webkit-transition: 200ms fill; transition: 200ms fill;
}
.settings-link:hover path { fill: rgba(0, 0, 0, 0.6);
}
.settings { position: absolute; z-index: 100; right: 0; top: 0; background: #212121; color: #fff; padding: 20px; -webkit-transform: translate(50%, -105%); transform: translate(50%, -105%); -webkit-transition: 200ms -webkit-transform ease-in-out; transition: 200ms -webkit-transform ease-in-out; transition: 200ms transform ease-in-out; transition: 200ms transform ease-in-out, 200ms -webkit-transform ease-in-out; outline: 5px solid rgba(0, 0, 0, 0.25);
}
.show-settings .settings { -webkit-transform: translate(-1vh, 1vh); transform: translate(-1vh, 1vh);
}
.settings .close { text-decoration: none; position: absolute; top: 5px; right: 8px; color: #fff;
}
.input { display: block; font-size: 12px; font-style: normal;
}
.input strong { margin-top: 5px; margin-bottom: 3px; display: block;
}
h1 { position: absolute; top: 2vh; left: 2vh; font-size: 2.5vh; line-height: 1; margin: 0; vertical-align: middle; font-weight: 300; overflow: hidden;
}
h1 .icon { position: relative; vertical-align: middle; border-radius: 100%; width: 2em; height: 2em; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; float: left; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: .2em solid currentColor;
}
h1 span { position: relative; flaot: left; padding-left: 1.1vh; vertical-align: middle; top: 0em; font-size: 1.25em;
}
h1 #hexval { position: absolute; top: 1.5em; left: 3.5em; display: inline-block; border: none; background: transparent; outline: none; font-size: .75em;
}
h1 svg { position: absolute; top: 54%; left: 53%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1.2em; height: 1.2em;
}
h1 svg path { fill: currentColor;
}
textarea, input[type=text] { color: #212121; padding: 0.2rem; width: 100%; box-sizing: border-box;
}
textarea { height: 0; opacity: 0; border: none;
}
textarea:focus { height: 5rem; opacity: 1;
}
.export { display: block; padding-top: 0.5rem;
}
.export strong { padding: 0.25rem 0.5rem; background: white; color: black; border-radius: 3px; cursor: pointer;
}
.export strong:hover { opacity: .9;
}

Color fan - Script Codes JS Codes

var $body, i, $d, cl, $fan, pages, $active, currentRot, colorVariations, max = 24, selectedColorVariation = 0, $gradient, $title, currentColors, $export;
colorVariations = [ { startHue: 0, light: 75, saturation: 100, type: 'huslp' }
];
$body = $('body');
$fan = $('.js-fan');
$title = $('.js-title');
$gradient = $('.gradient');
$d = $(document);
$export = $('.js-palette');
function convertCategories(pal) { pal = pal || 'hsl'; var newCategories = {}; for(var cetegory in colorCategories) { if(pal == 'husl'){ var hsl = tinycolor(colorCategories[cetegory]).toHsl(); newCategories[cetegory] = $.husl.toHex(hsl.h, hsl.s * 100, hsl.l * 100); }else if(pal == 'huslp'){ var hsl = tinycolor(colorCategories[cetegory]).toHsl(); newCategories[cetegory] = $.husl.p.toHex(hsl.h, hsl.s * 100, hsl.l * 100); }else{ newCategories[cetegory] = colorCategories[cetegory]; } } return newCategories;
}
createPalette(max, colorVariations[0]);
function createPalette (max, color) { var categories,getCatNames, startHue, s, l, type, currentColors = [], previousColor; startHue = color.startHue; s = color.saturation; l = color.light; type = color.type; categories = convertCategories(type); getCatNames = nearestColor.from(categories); pages = []; currentRot = 0; max = parseInt(max); startHue = parseInt(startHue), s = parseInt(s), l = parseInt(l); if ( $('.fan').length && colorVariations.length === 1 ) { $('.fan').empty(); } for (i = 0; i < max; i++) { var hsl = [(startHue + (i / max) * 360) % 360, s, l]; var $page = $('<div />', {class: 'fan-page js-page'}); var $color = $('<div />', {class: 'fan-color'}); var color, colorCSS, rotation, scale, colorName, colorCategory; pages.push($page); switch(type) { case 'hcl': //color = chroma.cubehelix((startHue / 360) * 2, 2, hsl[0]/100, 1, hsl[2]/100); //color = chroma('hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)').hex(); var c = chroma.cubehelix().start(startHue).rotations(-0.5).gamma(hsl[1]/100).lightness([Math.max(.1,1 - (hsl[2]/100)), hsl[2]/100]); color = 'red' color = c(hsl[0]/360).hex(); break; case 'huslp': color = $.husl.p.toHex.apply(this, hsl); break; case 'husl': color = $.husl.toHex.apply(this, hsl); break; default: color = tinycolor( 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)' ).toHexString(); break; } colorName = getClosestNamedColor( color ).name; colorCategory = getCatNames( color ).name; rotation = (i + 1) * (360 / max); scale = i * 2; $page.css({ "transform": "translate3d(0,0," + scale + "px) rotate(" + rotation + "deg)" }).data('rotation', rotation).data('scale', scale).data('color', color).data('colorname', colorName); if( previousColor ) { $page.data('previouscolor', previousColor); } if( i+1 == max ){ $fan.find('js-page:eq(0)').data('previouscolor', color); } previousColor = color; currentColors.push({name: colorName, color: color, category: colorCategory}); $color.css({ "color": color, "background-color": color }); $color.html("<span class='color-bg'><strong>" + color.toUpperCase() + "</strong><em class='color'>" + colorName + "</em></span>"); $page.append($color); $fan.append($page); } $gradient.each(function(){ var $that = $(this); $gradient.find('.fan-color').remove(); pages.forEach(function($page){ var $color = $('<div />', {class: 'fan-color'}); $color.css('background-color', $page.data('color') ); $that.append($color) }); }); $export.html(JSON.stringify(currentColors)); $body.append($fan); $active = pages[pages.length - 1];
}
$d.on('mouseenter', '.js-page', function(){ var $this = $(this); var match = false, before, after; pages.forEach(function($el, i){ var data = $el.data(); if( $el[0] === $this[0] ){ $el.css({ "transform": "translate3d(0,0," + (parseInt(data.scale) + 50) + "px) rotate(" + parseInt(data.rotation) + "deg)" }); match = i; } }); before = pages[match - 1] ? pages[match - 1] : pages[pages.length - 1]; after = pages[match + 1] ? pages[match + 1] : pages[0]; before.css({ "transform": "translate3d(0,0," + parseInt(before.data().scale) + "px) rotate(" + (parseInt(before.data().rotation) - 5) + "deg)" }); after.css({ "transform": "translate3d(0,0," + parseInt(after.data().scale) + "px) rotate(" + (parseInt(after.data().rotation) + 5) + "deg)" });
});
$d.on('mouseleave', '.js-page', function(){ pages.forEach(function($el, i){ var data = $el.data(); $el.css({ "transform": "translate3d(0,0," + parseInt(data.scale) + "px) rotate(" + parseInt(data.rotation) + "deg)" }); });
});
$d.on('click', '.js-page', function(){ var $this = $(this); if($this[0] === $active[0]) { $fan.css("transform", "rotate(0deg)"); $('html').css('background-color', '#fff' ); $('#hexval').val('#fff'); $active = pages[pages.length - 1]; currentRot = 0; $title.html(""); } else { var currentRot = parseInt($active.data().rotation); var newRot = parseInt($this.data().rotation); $fan.css("transform", "rotate(" + -newRot + "deg)"); $('html').css({ 'background-color': $this.data().color, }); //$('html')[0].style['background-image'] = '-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, '+ $this.data().color +'), color-stop(100%, '+$this.data().previouscolor+'))'; $active = $this; $title.html($this.data('colorname')); $('#hexval').val( $this.data().color ).focus().select(); }
});
$d.on('change', '#hue', function(){ var startHue = colorVariations[selectedColorVariation].startHue = parseInt( $(this).val() ); createPalette(max, colorVariations[selectedColorVariation]); $('.hue-val').html(startHue)
});
$d.on('change', '#colors', function(){ max = $(this).val(); createPalette(max, colorVariations[selectedColorVariation]); $('.colors-val').html(max);
});
$d.on('change', '#light', function(){ var light = colorVariations[selectedColorVariation].light = parseInt( $(this).val() ); createPalette(max, colorVariations[selectedColorVariation]); if(parseInt(light) > 75) { $('html').addClass('bg-dark'); }else{ $('html').removeClass('bg-dark'); } $('.light-val').html(light);
});
$d.on('change', '#saturation', function(){ var saturation = colorVariations[selectedColorVariation].saturation = parseInt( $(this).val() ); createPalette(max, colorVariations[selectedColorVariation]); $('.saturation-val').html(saturation);
});
$d.on('click', '.js-toggle-settings', function(){ $body.toggleClass('show-settings');
});
$d.on('change', '.js-color-type', function(){ var type = colorVariations[selectedColorVariation].type = $(this).val(); createPalette(max, colorVariations[selectedColorVariation]);
});
var timer;
$d.on('keyup', '#startcolor', function(){ var $this = $(this), val, hsl; val = $this.val(); if( tinycolor( val ).isValid() ) { clearTimeout(timer); hsl = tinycolor( val ).toHsl(); colorVariations[selectedColorVariation].startHue = hsl.h; $('#hue').val(hsl.h); colorVariations[selectedColorVariation].saturation = (hsl.s * 100) || 1; $('#saturation').val((hsl.s * 100) || 1); colorVariations[selectedColorVariation].light = (hsl.l * 100) || 1; $('#light').val((hsl.l * 100) || 1); setTimeout(function(){ createPalette(max, colorVariations[selectedColorVariation]); },500); }
});
Color fan - Script Codes
Color fan - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 4
Size 117,778 Kb
Views 16,192
Do you need developer help for Color fan?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David A. (meodai) Script Codes
Name
All the 16k color names from the color-name-list API
Infinite ping-pong
We Simplify animation
Better Grrif Player
Pijama ninja falling
Color Watch
Animated scroll timeline
Media Queries on Crack
Different centering methods
Cubehelix ticktack.js
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!