All the 16k color names from the color-name-list API

Developer
David A.
Size
6,006 Kb
Views
10,120
  1. All the 16k color names from the color-name-list API Previews
  2. All the 16k color names from the color-name-list API HTML Codes
  3. All the 16k color names from the color-name-list API CSS Codes
  4. All the 16k color names from the color-name-list API JS Codes

How do I make an all the 16k color names from the color-name-list api?

Showing off all the colors from: https://github.com/meodai/color-names/. What is a all the 16k color names from the color-name-list api? How do you make a all the 16k color names from the color-name-list api? This script and codes were developed by David A. on 13 January 2023, Friday.

All the 16k color names from the color-name-list API Previews
IQ Test

All the 16k color names from the color-name-list API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>All the 16k color names from the color-name-list API</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://unpkg.com/[email protected]/dist/vue-virtual-scroller.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <input type="text" placeholder="Filter" v-model="filter" /> <virtual-scroller page-mode :items="filteredColors" content-tag="div" :item-height="96" > <template scope="colors"> <div class="color" v-bind:class="{'is-dark': isDark(colors.item.rgb)}" :style="{backgroundColor: colors.item.hex}" :key="colors.item.hex"> <strong data-name>{{colors.item.name}}</strong> <span data-hex>{{colors.item.hex}}<i v-if="colors.item.hex == '#f0c'">k</i></span> </div> </template> </virtual-scroller>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vue-virtual-scroller.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vue-observe-visibility.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

All the 16k color names from the color-name-list API - Script Codes CSS Codes

@charset "UTF-8";
@import url("https://rsms.me/inter/inter-ui.css");
@import url("https://fonts.googleapis.com/css?family=Space+Mono:400");
html, input { font-family: 'Inter UI', sans-serif; font-size: 2rem; color: #212121; padding: 8.2rem 1rem 1rem; background: #212121;
}
body::after { content: '↓'; position: fixed; top: .3rem; right: .25rem; z-index: 2; font-size: 1.5rem; line-height: 2rem; padding: .5rem .7rem;
}
input { -webkit-appearance: none; border-radius: none; font-size: 1.25rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1; display: block; box-sizing: border-box; padding: .5rem 2rem .5rem .7rem; width: 100%; line-height: 1; color: #212121; background: #fff; border: .5rem solid #fff; box-shadow: inset 0 0 0 .15rem #000, 0 0 0 .5rem #000; letter-spacing: -0.02em;
}
.show-color input { -webkit-transform: translateY(-120%); transform: translateY(-120%); -webkit-transition: 200ms -webkit-transform ease-out; transition: 200ms -webkit-transform ease-out; transition: 200ms transform ease-out; transition: 200ms transform ease-out, 200ms -webkit-transform ease-out;
}
.color { line-height: 96px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 0 1rem; height: 96px; box-sizing: border-box;
}
.color.is-dark { color: #fff;
}
strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.5rem; letter-spacing: -0.02em;
}
span { font-family: 'Space Mono', monospace;
}
.large { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
}
.show-color .color { -webkit-transition: opacity 200ms linear; transition: opacity 200ms linear; opacity: 0;
}
.show-color .color.keep { display: block; position: fixed; opacity: 1; -webkit-transition: width 333ms cubic-bezier(0.3, 0.7, 0, 1) 150ms; transition: width 333ms cubic-bezier(0.3, 0.7, 0, 1) 150ms; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.show-color .color.keep strong, .show-color .color.keep span { position: absolute;
}
.show-color .color.keep strong { left: 1rem;
}
.show-color .color.keep span { right: 1rem; opacity: 0; -webkit-transition: opacity 200ms 150ms; transition: opacity 200ms 150ms;
}

All the 16k color names from the color-name-list API - Script Codes JS Codes

'use strict';
Vue.use(VueVirtualScroller);
Vue.component('virtual-scroller', VueVirtualScroller.VirtualScroller);
var $body = document.querySelector('body');
document.addEventListener('click', function (e) { return; var $target = e.target; var isColor = false; if ($target.classList.contains('color')) { isColor = true; } else if ($target.parentElement && $target.parentElement.classList.contains('color')) { isColor = true; $target = $target.parentElement; } else { return; } var isDark = $target.classList.contains('is-dark'); var name = $target.querySelector('[data-name]').textContent; var hex = $target.querySelector('[data-hex]').textContent; var $detail = document.createElement('div'); var $clone = $target.cloneNode(true); $clone.classList.remove('resize-observer'); $clone.style = ''; $detail.classList.add('color-detail'); var rect = $target.getBoundingClientRect(); $body.classList.add('show-color'); $clone.style.top = rect.top + 'px'; $clone.style.left = '50%'; $clone.style.height = rect.height + 'px'; $clone.style.width = rect.width + 'px'; $clone.style.background = hex; $body.append($clone); $clone.classList.add('keep'); var targetRect = { width: Math.min(rect.width, 500), height: Math.min(window.innerHeight, 600) }; setTimeout(function () { $clone.classList.add('squeeze'); $clone.style.width = targetRect.width + 'px'; }, 300);
});
var app = new Vue({ el: '#app', data: function data() { return { colors: [{ hex: '#ffffff', rgb: { r: 255, g: 255, b: 255 }, name: 'Loading tons of colors' }], filter: '' }; }, computed: { filteredColors: function filteredColors() { var lowerd = this.filter.toLowerCase(); var colors = this.colors.filter(function (col) { return col.name.toLowerCase().indexOf(lowerd) > -1 || col.hex.indexOf(lowerd) > -1; }); return colors.length ? colors : [{ hex: '#f0c', rgb: { r: 255, g: 255, b: 255 }, name: this.colors.length + ' colors and you can\'t find any!' }]; } }, methods: { isDark: function isDark(rgb) { return Math.round((parseInt(rgb.r) * 299 + parseInt(rgb.g) * 587 + parseInt(rgb.b) * 114) / 1000) < 125; }, show: function show(e) {} }
});
var xhr = new XMLHttpRequest();
xhr.open('GET', '//color-names.herokuapp.com/v1/');
xhr.onload = function (e) { if (xhr.status === 200) { var resp = JSON.parse(xhr.responseText); app.colors = resp.colors /*.sort((a,b) => ( a.luminance - b.luminance )).reverse()*/; } else { console.log(xhr.status); }
};
xhr.send();
All the 16k color names from the color-name-list API - Script Codes
All the 16k color names from the color-name-list API - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded January 13, 2023
Rating 3.5
Size 6,006 Kb
Views 10,120
Do you need developer help for All the 16k color names from the color-name-list API?

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
Social color-namer
Textmask over random clouds animation
DOM explosions
Pijama ninja falling
Different centering methods
Color fan
Infinite ping-pong
Color palette distribution for different color spaces
Media Queries on Crack
Cymk logo generator
Create amazing captions 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!