An interactive tool to generate beautiful color palettes from any base color. Pick a color or randomize one, then explore complementary, split, triadic, and other harmony schemes. Copy HEX codes or full CSS variables instantly.
A Pen by Alexandre Vacassin on CodePen.
Todo:
A Pen by mike-at-redspace on CodePen.
| <header> | |
| <section> | |
| <p>Hue</p> | |
| <div class="swatch max"><b><code>var(--color-max)</code></b></div> | |
| </section> | |
| <section> | |
| <div class="title-with-control"> | |
| <p>Options</p> | |
| <button id="shuffle" title="You can also press spacebar!"> | |
| <svg viewBox="0 0 24 24" width="17" height="24"> |
| // https://news.ycombinator.com/topcolors | |
| const colors = [ | |
| { | |
| value: "#ff6600", | |
| name: "Safety Orange", | |
| }, | |
| { | |
| value: "#00aadd", | |
| name: "Mystic Blue", | |
| }, |
| /** | |
| * A simple, customizable slug generator for browser-based inputs. | |
| * | |
| * Features: | |
| * - Optionally lowercases text | |
| * - Removes special characters | |
| * - Filters out stop words | |
| * - Removes numeric digits | |
| * - Supports dash or underscore delimiters | |
| * - Copy-to-clipboard functionality |
| import React from "react" | |
| import { Swiper, SwiperSlide } from "swiper/react" | |
| import useSWR from "swr" | |
| const fetcher = (url) => | |
| fetch(url, { | |
| headers: { | |
| Authorization: `Bearer YOUR_JWT_TOKEN` | |
| } | |
| }).then((res) => res.json()) |
| function usePageTransition({ | |
| beforeChange, | |
| afterChange, | |
| done, | |
| }) { | |
| const startResolverRef = useRef(null); | |
| const dataRef = useRef(null); | |
| const transitionRef = useRef(null); | |
| useLayoutEffect(() => { |
| const timestamp = getCurrentTimestamp() | |
| const startTime = new Date() | |
| try { | |
| const { status, headers } = await axios.get(site) | |
| const { date, trace_id: traceId } = headers | |
| const responseTime = new Date() - startTime | |
| const log = `${timestamp},${date},${status},${site},${responseTime}ms,${traceId},${headers['cache-control']}\n` | |
| await fs.appendFile(logFilePath, log) | |
| console.log(`${timestamp}: ${site} - ${responseTime}ms`) | |
| } catch (error) { |
