Mike Vardy mike-at-redspace

Ambient Glow Showcase

Color Palette Generator

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.

License.

Der Bunt: Color Harmonies (Alpha 1.1)

Todo:

Optimise for touch
3d view of color distribution in different color spaces
contrast ratio from selected color to all other colors
save & export palette
alternate palette views

A Pen by mike-at-redspace on CodePen.

Advanced Prompting Cheat Sheet

1. How to Choose a Model

OpenAI Family

Tiny Mobile (0-413px):

iPhone 5, iPhone 5c, iPhone 5s
iPhone 6, iPhone 6s, iPhone 7, iPhone 8, iPhone SE (2020), iPhone SE (2022)
iPhone 12 mini, iPhone 13 mini
iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, iPhone 14, iPhone 14 Pro, iPhone 15, iPhone 15 Pro
iPhone 11 Pro, iPhone X
Samsung Galaxy S21 (Dynamic AMOLED 2X, 6.2 inches, 1080 x 2400) Portrait
Google Pixel (AMOLED, 5 inches, 1080 x 1920) Portrait
Sony Xperia 1 III (OLED, 6.5 inches, 1644 x 3840) Portrait

	<svg class="sr-only">
	<filter id="knockout-black" colorInterpolationFilters="sRGB">
	<feColorMatrix
	type="matrix"
	values="1 0 0 0 0
	0 1 0 0 0
	0 0 1 0 0
	-1 -1 -1 0 1"
	/>
	<feComposite in="SourceGraphic" operator="out" />

	<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())