Markdown

example.md 34 colors
  1---
  2title: "Theme test document"
  3author: "Developer"
  4---
  5
  6# Heading level 1 (H1)
  7## Heading level 2 (H2)
  8### Heading level 3 (H3)
  9
 10This is a standard paragraph. It allows testing **bold** text, *italic* text, and ***bold and italic*** text. Let's also test ~~strikethrough~~ text.
 11
 12> **Important note:** This is a quote (blockquote).
 13> It spans multiple lines and includes a [link to a website](https://www.rust-lang.org/).
 14
 15#### Lists and structures
 16
 17* Bullet list (level 1)
 18* Next item
 19  * Indented sub-item (level 2)
 20  * Another sub-item with `inline code`
 21
 221. Numbered list (first step)
 232. Second step
 24   1. Sub-step A
 25   2. Sub-step B
 26
 27#### Code blocks and media
 28
 29Here is a code block with language specification:
 30
 31```json
 32{
 33  "string_key": "value",
 34  "number_key": 42,
 35  "boolean_key": false,
 36  "null_key": null,
 37  "nested": {
 38    "level1": {
 39      "level2": {
 40        "level3": [1, [2, [3, [4]]]]
 41      }
 42    }
 43  }
 44}
 45

Python

example.py 32 colors
  1import os
  2from datetime import datetime
  3from typing import List, Dict, Optional, Union
  4
  5# This is a single-line comment
  6"""
  7Useful for verifying the color of module or function descriptions.
  8"""
  9
 10GLOBAL_CONSTANT_PI = 3.1415926535
 11
 12def dummy_decorator(func):
 13    """Test decorator."""
 14    def wrapper(*args, **kwargs):
 15        return func(*args, **kwargs)
 16    return wrapper
 17
 18class SyntaxTester(Exception):
 19    def __init__(self, name: str, is_active: bool = True):
 20        self.data_collection: List[Union[int, str]] = [1, 2, "three", 4.5]
 21        self.config: Dict[str, Optional[bool]] = {"dark_mode": True, "cache": None}
 22        self.nested = {
 23            "level1": {
 24                "level2": {
 25                    "level3": [
 26                        [1, [2, [3, [4]]]]
 27                    ]
 28                }
 29            }
 30        }
 31
 32    @classmethod
 33    def test_colors(cls, value: int = 0) -> None:
 34        if value < 0:
 35            raise ValueError("Value cannot be negative")
 36
 37        # Test loops and formatted strings (f-strings)
 38        for i in range(10):
 39            formatted_string = f"Test of class {cls.__name__} - Iteration: {i}"
 40            print(formatted_string)
 41
 42        try:
 43            with open("dummy_file.txt", "r", encoding="utf-8") as file:
 44                content = file.read()
 45        except FileNotFoundError as error:
 46            pass # Silent keyword
 47

TypeScript

example.ts 38 colors
  1/**
  2 * @fileoverview Artificial Intelligence Core - ARN Spaceport
  3 * @TODO Implement quantum computing nodes before v2.0
  4 */
  5
  6// Mock definitions for demonstration
  7interface IConfig { [key: string]: any }
  8class BaseAgent {
  9  public initialize(): void {}
 10  public async process(payload: string): Promise<void> {}
 11}
 12function Injectable(id: string) { return (ctr: Function) => {}; }
 13function LogExecutionTime() { return (...args: any[]) => {}; }
 14
 15// Semantic analysis regex (Highlights RegExp colors)
 16const TOKEN_REGEX = /^(?:[a-zA-Z_]\w*)\s*:\s*(?<value>.*)$/g;
 17
 18@Injectable('QuantumNode')
 19export class NebulaProcessor<T> extends BaseAgent implements IConfig {
 20  // Highlights 'static' (underlined) and 'readonly' (italic) modifiers
 21  public static readonly MAX_THREADS: number = 42
 22  private isAwake: boolean = false;
 23
 24  @LogExecutionTime()
 25  public async analyzeData(payload: string | null): Promise<void> {
 26    if (!payload) return undefined;
 27
 28    const dynamicId = `node_${Math.random()}`;
 29    console.log(`[${dynamicId}] Starting analysis...`);
 30
 31    const nestedData = {
 32      level1: {
 33        level2: {
 34          level3: [
 35            [1, [2, [3, [4]]]]
 36          ]
 37        }
 38      }
 39    };
 40    try {
 41      await this.process(payload);
 42    } catch (error: any) {
 43      throw new Error(`Analysis failed: ${error.message}`);
 44    }
 45  } 
 46}
 47// try ARN-Skin --Explore  

Rust

example.rs 28 colors
  1---
  2
  3### 🦀 Rust
  4
  5This language is excellent for testing themes in depth thanks to its macros, lifetimes, traits, pattern matching, and raw strings.
  6
  7```rust
  8//! Module-level documentation comment (crate level)
  9//! Used to generate external documentation.
 10
 11#![allow(dead_code)] // Global attribute
 12
 13use std::collections::HashMap;
 14use std::fmt::{Display, Formatter, Result};
 15
 16/// Documentation comment describing a structure.
 17#[derive(Debug, Clone, PartialEq)]
 18pub struct ColorScheme<'a, T> {
 19    name: String,
 20    id_number: u32,
 21    _phantom: std::marker::PhantomData<&'a T>,
 22}
 23
 24// Trait implementation with generics and lifetimes
 25impl<'a, T: Display> ColorScheme<'a, T> {
 26    fn apply_color(&self) -> String {
 27        // Macro usage (the "!" is often colored differently)
 28        format!("Theme {}: (ID: {})", self.name, self.id_number)
 29    }
 30}
 31
 32/* * Standard multi-line comment block.
 33 * Useful for long internal explanations.
 34 */
 35pub fn test_syntax_highlighting(param: i32, reference: &str) -> Result {
 36    // Mutable variables and vectors
 37    let mut float_vector = vec![1.54_f32, 2.0, 3.14159];
 38    let byte_literal = b'A'; // Byte literal
 39
 40    // Nested data structure to showcase rainbow brackets
 41    let nested = vec![
 42        vec![
 43            vec![
 44                vec![1, 2, 3]
 45            ]
 46        ]
 47    ];
 48
 49    let mut dictionary = HashMap::new();
 50    dictionary.insert("keyword", 100_000);
 51
 52    // Pattern matching (Match)
 53    match param {
 54        0 => println!("Exact zero"),
 55        1..=10 => println!("In the range 1 to 10"),
 56        _ => panic!("Panic macro execution with {:?}", dictionary),
 57    }
 58
 59    // For loop with iterator, mutable reference and shadowing
 60    for (index, value) in float_vector.iter_mut().enumerate() {
 61        let index = index as f32; // Shadowing the index variable
 62        *value += index;
 63    }
 64
 65    Ok(())
 66}
 67

CSS

example.css 25 colors
  1/* Example CSS — exercises broad CSS syntax coverage for theme audits */
  2
  3@charset "UTF-8";
  4@import url("./reset.css");
  5@namespace svg url("http://www.w3.org/2000/svg");
  6
  7:root {
  8  --primary-color: #c0ff00;
  9  --secondary-color: rgba(63, 229, 255, 0.85);
 10  --spacing: clamp(1rem, 2.5vw, 2rem);
 11  --radius: 0.5rem;
 12  --font-stack: "Inter", system-ui, -apple-system, sans-serif;
 13}
 14
 15/* Universal + type + id + class + attribute selectors */
 16*,
 17*::before,
 18*::after {
 19  box-sizing: border-box;
 20}
 21
 22@supports (backdrop-filter: blur(10px)) {
 23  .glass {
 24    backdrop-filter: blur(10px) saturate(1.2);
 25    background: rgb(255 255 255 / 0.1);
 26  }
 27}
 28
 29/* Container query */
 30@container (min-width: 400px) {
 31  .card {
 32    padding: 2rem;
 33  }
 34}
 35
 36/* Vendor prefixes + !important */
 37.scrollbar {
 38  -webkit-overflow-scrolling: touch !important;
 39  scrollbar-width: thin;
 40  scrollbar-color: var(--primary-color) transparent;
 41}
 42
 43/* Nested at-rules to showcase rainbow brackets */
 44@media (min-width: 768px) {
 45  @supports (display: grid) {
 46    @container (min-width: 400px) {
 47      .nested {
 48        color: red;
 49      }
 50    }
 51  }
 52}
 53

HTML

example.html 27 colors
  1<!DOCTYPE html>
  2<html lang="en" data-theme="dark">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>VS Code Theme Test</title>
  7    <style>
  8        /* Embedded CSS to verify mixed-language detection */
  9        :root {
 10            --primary-color: #ff0055;
 11        }
 12        .container-class {
 13            background-color: rgba(25, 25, 25, 0.9);
 14            font-family: 'Courier New', Courier, monospace !important;
 15            margin: 10px auto;
 16        }
 17    </style>
 18</head>
 19<body>
 20    <main class="container-class">
 21        <section aria-labelledby="main-title">
 22            <p>
 23                Here is a paragraph with an <a href="https://example.com" target="_blank" rel="noopener">external link</a>.
 24                It contains <strong>bold</strong> text, <em>italic</em> text, and an inline <code>code</code> tag.
 25            </p>
 26
 27            <img src="placeholder.svg" alt="Image description" width="100%" height="auto" />
 28
 29            <form action="/submit-endpoint" method="POST" onsubmit="return false;">
 30                <label for="user-input">Required input:</label>
 31                <input type="text" id="user-input" name="data_field" placeholder="Type here..." required>
 32                <button type="submit" disabled>Send data</button>
 33            </form>
 34        </section>
 35    </main>
 36
 37    <script>
 38        // Embedded JS to verify mixed-language detection
 39        const greetingMessage = "Initialization script loaded";
 40
 41        function initializeApp(configObj) {
 42            const nested = {
 43                level1: {
 44                    level2: {
 45                        level3: [
 46                            [1, [2, [3]]]
 47                        ]
 48                    }
 49                }
 50            };
 51        }
 52    </script>
 53</body>
 54</html>
 55

JSON

example.json 15 colors
  1{
  2  "$schema": "https://json.schemastore.org/package.json",
  3  "name": "arn-skin-example",
  4  "version": "1.2.3",
  5  "description": "Example JSON exercising broad syntax coverage for theme audits.",
  6  "private": true,
  7  "dependencies": {
  8    "chalk": "^5.3.0",
  9    "kleur": "~4.1.5",
 10    "picocolors": "1.0.0"
 11  },
 12  "devDependencies": {
 13    "@types/node": "^20.0.0",
 14    "typescript": "5.3.3",
 15    "vitest": "^1.0.0"
 16  },
 17  "config": {
 18    "colorFormat": "hex",
 19    "supportedLanguages": ["typescript", "python", "rust"],
 20    "maxDepth": 12,
 21    "enableCache": true,
 22    "cacheTtl": null,
 23    "retries": 0,
 24    "ratio": 1.618,
 25    "negative": -42,
 26    "scientific": 1.23e-7,
 27    "unicode": "\u00e9\u00e0\u00ea — hello \u4e16\u754c",
 28    "escape": "line 1\nline 2\ttab\"quote\\backslash"
 29  },
 30  "nested": {
 31    "deeply": {
 32      "structured": {
 33        "arrays": [
 34          [1, 2, 3],
 35          ["a", "b", "c"],
 36          [true, false, null]
 37        ],
 38        "mixed": [
 39          { "id": 1, "active": true },
 40          { "id": 2, "active": false, "meta": null }
 41        ]
 42      }
 43    }
 44  }
 45}
 46

Shell

example.sh 28 colors
  1#!/usr/bin/env bash
  2# Example shell script — exercises broad bash syntax coverage for theme audits
  3# shellcheck disable=SC2034
  4
  5set -euo pipefail
  6IFS=$'\n\t'
  7
  8# Constants and variables
  9readonly SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &>/dev/null && pwd)"
 10readonly LOG_FILE="${SCRIPT_DIR}/build.log"
 11declare -a TARGETS=("spaceport" "uranus" "neptune" "nebula" "mars" "io" "jupiter")
 12declare -A COLORS=(
 13  [io]="#c0ff00"
 14  [neptune]="#3fe5ff"
 15  [jupiter]="#d99815"
 16)
 17
 18# Main loop
 19for theme in "${TARGETS[@]}"; do
 20  # Arithmetic
 21  count=$(( count + 1 ))
 22done
 23
 24# Subshell + pipeline
 25(
 26  cd "$BUILD_DIR"
 27  find . -name '*.json' -print0 | xargs -0 -n 1 jq '.name' 2>/dev/null | sort -u
 28)
 29
 30# Case statement
 31case "${1:-help}" in
 32  build|b)   print_banner "BUILD" ;;
 33  test|t)    print_banner "TEST" ;;
 34  clean|c)   rm -rf "$BUILD_DIR" && echo "cleaned" ;;
 35  help|-h|*) echo "Usage: $0 {build|test|clean|help}" ; exit 0 ;;
 36esac
 37
 38# Nested subshells and parameter expansion to showcase rainbow brackets
 39deep=$(
 40  echo $(
 41    echo $(
 42      echo $(
 43        echo "deep"
 44      )
 45    )
 46  )
 47)
 48nested_var=${a:-${b:-${c:-${d:-default}}}}
 49
 50# Exit code
 51exit 0
 52

SQL

example.sql 15 colors
  1-- Example SQL — exercises broad SQL syntax coverage for theme audits
  2-- Comments: single-line and /* block comment */
  3
  4/* Schema definition with foreign keys, check constraints, indexes */
  5CREATE SCHEMA IF NOT EXISTS arn;
  6
  7CREATE TABLE arn.themes (
  8    id           SERIAL      PRIMARY KEY,
  9    name         VARCHAR(64) NOT NULL UNIQUE,
 10    bg_color     CHAR(7)     NOT NULL,
 11    signature    CHAR(7)     NOT NULL,
 12    is_light     BOOLEAN     NOT NULL DEFAULT FALSE,
 13    created_at   TIMESTAMP   NOT NULL DEFAULT CURRENT_TIMESTAMP,
 14    metadata     JSONB,
 15    CONSTRAINT chk_bg_format CHECK (bg_color ~ '^#[0-9a-fA-F]{6}$')
 16);
 17
 18CREATE INDEX idx_themes_name ON arn.themes (LOWER(name));
 19
 20/* Seed data */
 21INSERT INTO arn.themes (name, bg_color, signature, is_light, metadata) VALUES
 22    ('spaceport', '#121416', '#e8d44c', FALSE, '{"planet": "earth-orbit"}'),
 23    ('io',        '#0e100a', '#c0ff00', FALSE, '{"planet": "jupiter-moon"}'),
 24    ('neptune',   '#050B1C', '#3FE5FF', FALSE, '{"planet": "neptune"}'),
 25    ('jupiter',   '#fdfbf5', '#d99815', TRUE,  '{"planet": "jupiter"}');
 26
 27/* Complex query: CTEs, window functions, joins, aggregation */
 28WITH theme_stats AS (
 29    SELECT
 30        t.id,
 31        t.name,
 32        t.is_light,
 33        COUNT(*)      OVER (PARTITION BY t.is_light) AS peer_count,
 34        ROW_NUMBER()  OVER (ORDER BY t.created_at)   AS rn,
 35        RANK()        OVER (ORDER BY LENGTH(t.name) DESC) AS name_rank
 36    FROM arn.themes AS t
 37    WHERE t.created_at >= CURRENT_DATE - INTERVAL '30 days'
 38)
 39SELECT * FROM theme_stats LIMIT 10;
 40
 41-- Nested subqueries to showcase rainbow brackets
 42SELECT * FROM (
 43    SELECT id FROM (
 44        SELECT id FROM (
 45            SELECT id FROM arn.themes WHERE id = 1
 46        )
 47    )
 48);
 49

Methodology

Algorithmic generation, human refinement, cross-language architecture

The palette was first generated algorithmically: real source files in nine languages are tokenized with Microsoft TextMate grammars, candidate hex values are sampled in OKLCH space, and simulated annealing assigns colors to scopes by minimizing pairwise CIE76 ΔE collisions and maximizing chromatic diversity. The output was then extensively refined by hand across many iterations to handle visual conflicts the automated metrics could not see — semantic mismatches between hue family and meaning, awkward neighbors in real code, perceived warmth/coldness of the overall composition, and per-language identity preferences.

The theme is built around general TextMate scope rules that apply to every supported language — concepts like keyword.control, string, entity.name.function, storage.type, punctuation.definition.string, etc. A small number of language-specific rules override the defaults only when the visual context truly demands it (Python support.function.builtin.python vs. generic support.function, Rust entity.name.namespace.rust, JSON support.type.property-name.json, etc.). This architecture keeps the cross-language palette coherent — a string is a string everywhere — while preserving each language's unique syntactic identity. Rainbow brackets follow the same logic: cumulative composed selectors (meta.block.ts meta.block.ts punctuation.definition.block.ts) gradient through saturated colors as nesting deepens.

Quality criteria enforced and verified per theme:

Code samples on this page are rendered in 0xProto, a programming font designed for legibility at small sizes — chosen here for its disambiguated glyphs, programming ligatures, and stable rendering across operating systems.

Real measurements computed below from the actual tokens rendered in the samples above:

Co-occurring tokens (intra-language)
99.5%
3361 / 3377 pairs satisfy ΔE ≥ 12 · worst case ΔE = 2.4
Background contrast
100.0%
242 / 242 foreground colors satisfy ΔE ≥ 15 · worst case ΔE = 27.3

Per-language palettes — colors sorted by OKLCH luminance (brightest first). Hover a swatch to see the rule name and example tokens. Each per-color swatch shows usage count, WCAG ratio, and CIE76 ΔE vs. background (a ! marks the rare colors below the ΔE 15 threshold).

Markdown

34 colors
Co-occurring tokens ΔE min 6.0 · avg 82.1 556/561 pairs ≥ 12 (99%)
Background contrast ΔE min 27.3 · avg 89.4 34/34 colors ≥ 15 (100%)
#01
#CDFB7B
1× · WCAG 16.1 · ΔE 109
#02
#C8FE58
15× · WCAG 16.2 · ΔE 119
#03
#ACF685
2× · WCAG 14.8 · ΔE 105
#04
#FDBEFF
4× · WCAG 12.7 · ΔE 91
#05
#0FECBC
1× · WCAG 12.5 · ΔE 98
#06
#96CEFF
2× · WCAG 11.5 · ΔE 83
#07
#FFAF80
2× · WCAG 10.7 · ΔE 85
#08
#77E080
8× · WCAG 11.6 · ΔE 97
#09
#FCB600
2× · WCAG 10.8 · ΔE 109
#10
#C0D100
2× · WCAG 11.3 · ΔE 111
#11
#D3C92C
4× · WCAG 11.1 · ΔE 103
#12
#92DB6B
7× · WCAG 11.5 · ΔE 98
#13
#7FD67F
2× · WCAG 10.8 · ΔE 91
#14
#FF9275
2× · WCAG 8.8 · ΔE 84
#15
#47D15B
1× · WCAG 9.6 · ΔE 102
#16
#65C98E
4× · WCAG 9.4 · ΔE 83
#17
#00D543
8× · WCAG 9.7 · ΔE 114
#18
#9DBF61
4× · WCAG 9.2 · ΔE 84
#19
#D48CC3
2× · WCAG 7.6 · ΔE 76
#20
#9AA1AD
8× · WCAG 7.4 · ΔE 62
#21
#2CBD47
5× · WCAG 7.7 · ΔE 98
#22
#F432FF
2× · WCAG 6.1 · ΔE 125
#23
#00BB3A
2× · WCAG 7.4 · ΔE 102
#24
#00A7C3
2× · WCAG 6.7 · ΔE 69
#25
#B77A36
2× · WCAG 5.3 · ΔE 70
#26
#F22155
16× · WCAG 4.7 · ΔE 94
#27
#EA4000
5× · WCAG 4.8 · ΔE 102
#28
#B15300
1× · WCAG 3.7 · ΔE 77
#29
#0063F6
1× · WCAG 3.8 · ΔE 99
#30
#CB2449
5× · WCAG 3.5 · ΔE 80
#31
#8952BC
6× · WCAG 3.6 · ΔE 79
#32
#007B81
2× · WCAG 3.8 · ΔE 51
#33
#60318A
2× · WCAG 2.1 · ΔE 65
#34
#003D2E
2× · WCAG 1.6 · ΔE 27

Python

32 colors
Co-occurring tokens ΔE min 8.7 · avg 76.8 494/496 pairs ≥ 12 (100%)
Background contrast ΔE min 62.4 · avg 98.5 32/32 colors ≥ 15 (100%)
#01
#E8EEFF
2× · WCAG 16.5 · ΔE 90
#02
#E3F569
2× · WCAG 16.0 · ΔE 110
#03
#FBEE00
13× · WCAG 15.8 · ΔE 126
#04
#C8FE58
39× · WCAG 16.2 · ΔE 119
#05
#D9ED22
1× · WCAG 14.7 · ΔE 121
#06
#ACF685
26× · WCAG 14.8 · ΔE 105
#07
#15FF99
6× · WCAG 14.4 · ΔE 115
#08
#FDBEFF
4× · WCAG 12.7 · ΔE 91
#09
#ACE500
5× · WCAG 12.7 · ΔE 120
#10
#5FE0D2
12× · WCAG 11.9 · ΔE 86
#11
#FCB600
4× · WCAG 10.8 · ΔE 109
#12
#A5D924
12× · WCAG 11.4 · ΔE 111
#13
#FFA3CE
2× · WCAG 10.4 · ΔE 84
#14
#77E320
1× · WCAG 11.7 · ΔE 121
#15
#7FD67F
18× · WCAG 10.8 · ΔE 91
#16
#00DBC2
2× · WCAG 10.9 · ΔE 89
#17
#FF9275
4× · WCAG 8.8 · ΔE 84
#18
#79C77E
5× · WCAG 9.4 · ΔE 83
#19
#ADBD24
2× · WCAG 9.2 · ΔE 98
#20
#F871FF
9× · WCAG 8.0 · ΔE 108
#21
#CFAF00
1× · WCAG 8.9 · ΔE 99
#22
#00D543
9× · WCAG 9.7 · ΔE 114
#23
#00D27C
4× · WCAG 9.6 · ΔE 97
#24
#9AA1AD
3× · WCAG 7.4 · ΔE 62
#25
#F432FF
22× · WCAG 6.1 · ΔE 125
#26
#6DB443
9× · WCAG 7.5 · ΔE 88
#27
#CD6AEF
8× · WCAG 6.3 · ΔE 99
#28
#A8A000
4× · WCAG 7.0 · ΔE 89
#29
#00B0B9
3× · WCAG 7.2 · ΔE 71
#30
#F44D3A
3× · WCAG 5.4 · ΔE 94
#31
#329F42
4× · WCAG 5.6 · ΔE 81
#32
#739333
4× · WCAG 5.4 · ΔE 72

TypeScript

38 colors
Co-occurring tokens ΔE min 2.4 · avg 74.5 699/703 pairs ≥ 12 (99%)
Background contrast ΔE min 40.7 · avg 94.3 38/38 colors ≥ 15 (100%)
#01
#FFE88C
2× · WCAG 15.7 · ΔE 99
#02
#FBEE00
4× · WCAG 15.8 · ΔE 126
#03
#C8FE58
3× · WCAG 16.2 · ΔE 119
#04
#E3F700
4× · WCAG 16.0 · ΔE 128
#05
#ACF685
43× · WCAG 14.8 · ΔE 105
#06
#7FFB00
7× · WCAG 14.3 · ΔE 135
#07
#4BFF69
12× · WCAG 14.4 · ΔE 124
#08
#15FF99
12× · WCAG 14.4 · ΔE 115
#09
#B8ED43
6× · WCAG 13.9 · ΔE 115
#10
#5FE0D2
22× · WCAG 11.9 · ΔE 86
#11
#FCB600
2× · WCAG 10.8 · ΔE 109
#12
#A5D924
13× · WCAG 11.4 · ΔE 111
#13
#77E320
7× · WCAG 11.7 · ΔE 121
#14
#7FD67F
1× · WCAG 10.8 · ΔE 91
#15
#B1BE57
7× · WCAG 9.5 · ΔE 86
#16
#FF9275
2× · WCAG 8.8 · ΔE 84
#17
#F29862
2× · WCAG 8.6 · ΔE 83
#18
#F871FF
5× · WCAG 8.0 · ΔE 108
#19
#F6981B
11× · WCAG 8.6 · ΔE 100
#20
#CFAF00
4× · WCAG 8.9 · ΔE 99
#21
#00D543
5× · WCAG 9.7 · ΔE 114
#22
#94A1F0
2× · WCAG 7.9 · ΔE 79
#23
#9AA1AD
8× · WCAG 7.4 · ΔE 62
#24
#F432FF
4× · WCAG 6.1 · ΔE 125
#25
#6DB443
6× · WCAG 7.5 · ΔE 88
#26
#CD6AEF
14× · WCAG 6.3 · ΔE 99
#27
#EE704F
6× · WCAG 6.4 · ΔE 84
#28
#00B0B9
12× · WCAG 7.2 · ΔE 71
#29
#749C00
10× · WCAG 5.9 · ΔE 87
#30
#C36A7F
2× · WCAG 5.2 · ΔE 65
#31
#729908
2× · WCAG 5.7 · ΔE 84
#32
#329F42
20× · WCAG 5.6 · ΔE 81
#33
#BD7200
2× · WCAG 5.1 · ΔE 82
#34
#739333
1× · WCAG 5.4 · ΔE 72
#35
#838F00
12× · WCAG 5.4 · ΔE 80
#36
#5F7E19
1× · WCAG 4.1 · ΔE 68
#37
#437C39
2× · WCAG 3.8 · ΔE 60
#38
#005876
2× · WCAG 2.4 · ΔE 41

Rust

28 colors
Co-occurring tokens ΔE min 5.9 · avg 74.2 374/378 pairs ≥ 12 (99%)
Background contrast ΔE min 52.6 · avg 92.9 28/28 colors ≥ 15 (100%)
#01
#FBEE00
12× · WCAG 15.8 · ΔE 126
#02
#C8FE58
3× · WCAG 16.2 · ΔE 119
#03
#ACF685
20× · WCAG 14.8 · ΔE 105
#04
#7FFB00
3× · WCAG 14.3 · ΔE 135
#05
#15FF99
6× · WCAG 14.4 · ΔE 115
#06
#FFC1A5
2× · WCAG 12.2 · ΔE 84
#07
#FFBB75
23× · WCAG 11.5 · ΔE 89
#08
#B1DD5C
6× · WCAG 12.2 · ΔE 101
#09
#77E320
31× · WCAG 11.7 · ΔE 121
#10
#54D2FF
17× · WCAG 11.0 · ΔE 85
#11
#7FD67F
26× · WCAG 10.8 · ΔE 91
#12
#FD9A00
10× · WCAG 8.9 · ΔE 105
#13
#B1BE57
38× · WCAG 9.5 · ΔE 86
#14
#00C3F7
8× · WCAG 9.3 · ΔE 82
#15
#80C857
11× · WCAG 9.4 · ΔE 93
#16
#F871FF
6× · WCAG 8.0 · ΔE 108
#17
#F6981B
2× · WCAG 8.6 · ΔE 100
#18
#00D543
13× · WCAG 9.7 · ΔE 114
#19
#54BBA9
8× · WCAG 8.3 · ΔE 73
#20
#C87EE6
2× · WCAG 6.9 · ΔE 88
#21
#9AA1AD
16× · WCAG 7.4 · ΔE 62
#22
#98A53C
9× · WCAG 7.1 · ΔE 80
#23
#00B0B9
15× · WCAG 7.2 · ΔE 71
#24
#00AA96
2× · WCAG 6.6 · ΔE 70
#25
#F44D3A
10× · WCAG 5.4 · ΔE 94
#26
#329F42
32× · WCAG 5.6 · ΔE 81
#27
#739333
3× · WCAG 5.4 · ΔE 72
#28
#475995
2× · WCAG 2.9 · ΔE 53

CSS

25 colors
Co-occurring tokens ΔE min 13.3 · avg 82.3 300/300 pairs ≥ 12 (100%)
Background contrast ΔE min 62.4 · avg 96.8 25/25 colors ≥ 15 (100%)
#01
#FBEE00
2× · WCAG 15.8 · ΔE 126
#02
#C8FE58
26× · WCAG 16.2 · ΔE 119
#03
#FFDBD1
2× · WCAG 14.9 · ΔE 87
#04
#ACF685
21× · WCAG 14.8 · ΔE 105
#05
#7FFB00
13× · WCAG 14.3 · ΔE 135
#06
#7DE5FF
2× · WCAG 13.2 · ΔE 88
#07
#F6ADF8
3× · WCAG 11.2 · ΔE 90
#08
#A5D924
28× · WCAG 11.4 · ΔE 111
#09
#7FD67F
3× · WCAG 10.8 · ΔE 91
#10
#FD9A00
4× · WCAG 8.9 · ΔE 105
#11
#6AD200
4× · WCAG 9.9 · ΔE 116
#12
#CB9AFF
4× · WCAG 8.8 · ΔE 90
#13
#CFAF00
2× · WCAG 8.9 · ΔE 99
#14
#00D543
22× · WCAG 9.7 · ΔE 114
#15
#00C098
2× · WCAG 8.2 · ΔE 81
#16
#9AA1AD
5× · WCAG 7.4 · ΔE 62
#17
#F432FF
6× · WCAG 6.1 · ΔE 125
#18
#A8A000
9× · WCAG 7.0 · ΔE 89
#19
#00B0B9
1× · WCAG 7.2 · ΔE 71
#20
#749C00
16× · WCAG 5.9 · ΔE 87
#21
#349D64
9× · WCAG 5.6 · ΔE 70
#22
#4D9D00
5× · WCAG 5.6 · ΔE 90
#23
#EA4000
11× · WCAG 4.8 · ΔE 102
#24
#BD7200
8× · WCAG 5.1 · ΔE 82
#25
#A839AE
2× · WCAG 3.5 · ΔE 85

HTML

27 colors
Co-occurring tokens ΔE min 12.3 · avg 87.6 351/351 pairs ≥ 12 (100%)
Background contrast ΔE min 59.7 · avg 92.9 27/27 colors ≥ 15 (100%)
#01
#C8FE58
32× · WCAG 16.2 · ΔE 119
#02
#92FB9A
25× · WCAG 15.0 · ΔE 105
#03
#ACF685
78× · WCAG 14.8 · ΔE 105
#04
#F6ADF8
36× · WCAG 11.2 · ΔE 90
#05
#0FECBC
37× · WCAG 12.5 · ΔE 98
#06
#5FE0D2
4× · WCAG 11.9 · ΔE 86
#07
#A5D924
6× · WCAG 11.4 · ΔE 111
#08
#7FD67F
27× · WCAG 10.8 · ΔE 91
#09
#FD9A00
2× · WCAG 8.9 · ΔE 105
#10
#FF9275
2× · WCAG 8.8 · ΔE 84
#11
#F871FF
2× · WCAG 8.0 · ΔE 108
#12
#CFAF00
2× · WCAG 8.9 · ΔE 99
#13
#00D543
5× · WCAG 9.7 · ΔE 114
#14
#94A1F0
2× · WCAG 7.9 · ΔE 79
#15
#9AA1AD
1× · WCAG 7.4 · ΔE 62
#16
#F432FF
50× · WCAG 6.1 · ΔE 125
#17
#CD6AEF
2× · WCAG 6.3 · ΔE 99
#18
#A8A000
1× · WCAG 7.0 · ΔE 89
#19
#00B0B9
1× · WCAG 7.2 · ΔE 71
#20
#749C00
4× · WCAG 5.9 · ΔE 87
#21
#C36A7F
2× · WCAG 5.2 · ΔE 65
#22
#349D64
3× · WCAG 5.6 · ΔE 70
#23
#AE44FF
4× · WCAG 4.6 · ΔE 117
#24
#EA4000
3× · WCAG 4.8 · ΔE 102
#25
#BD7200
2× · WCAG 5.1 · ΔE 82
#26
#A839AE
2× · WCAG 3.5 · ΔE 85
#27
#437C39
2× · WCAG 3.8 · ΔE 60

JSON

15 colors
Co-occurring tokens ΔE min 15.4 · avg 92.4 105/105 pairs ≥ 12 (100%)
Background contrast ΔE min 50.7 · avg 88.0 15/15 colors ≥ 15 (100%)
#01
#C8FE58
72× · WCAG 16.2 · ΔE 119
#02
#96CEFF
2× · WCAG 11.5 · ΔE 83
#03
#FCB600
9× · WCAG 10.8 · ΔE 109
#04
#7FD67F
23× · WCAG 10.8 · ΔE 91
#05
#00D543
35× · WCAG 9.7 · ΔE 114
#06
#00D27C
9× · WCAG 9.6 · ΔE 97
#07
#D48CC3
8× · WCAG 7.6 · ΔE 76
#08
#F432FF
38× · WCAG 6.1 · ΔE 125
#09
#00A7C3
6× · WCAG 6.7 · ΔE 69
#10
#B77A36
2× · WCAG 5.3 · ΔE 70
#11
#F22155
70× · WCAG 4.7 · ΔE 94
#12
#EA4000
10× · WCAG 4.8 · ΔE 102
#13
#007B81
2× · WCAG 3.8 · ΔE 51
#14
#514288
4× · WCAG 2.3 · ΔE 55
#15
#60318A
6× · WCAG 2.1 · ΔE 65

Shell

28 colors
Co-occurring tokens ΔE min 5.7 · avg 78.9 377/378 pairs ≥ 12 (100%)
Background contrast ΔE min 50.7 · avg 94.7 28/28 colors ≥ 15 (100%)
#01
#D3F897
1× · WCAG 16.1 · ΔE 101
#02
#C8FE58
6× · WCAG 16.2 · ΔE 119
#03
#C0FF00
4× · WCAG 16.0 · ΔE 132
#04
#ACF685
30× · WCAG 14.8 · ΔE 105
#05
#7FFB00
7× · WCAG 14.3 · ΔE 135
#06
#5FE0D2
2× · WCAG 11.9 · ΔE 86
#07
#96CEFF
6× · WCAG 11.5 · ΔE 83
#08
#A5D924
4× · WCAG 11.4 · ΔE 111
#09
#37E959
1× · WCAG 11.8 · ΔE 117
#10
#7FD67F
57× · WCAG 10.8 · ΔE 91
#11
#12D947
4× · WCAG 10.1 · ΔE 115
#12
#B1BE57
14× · WCAG 9.5 · ΔE 86
#13
#FF9275
2× · WCAG 8.8 · ΔE 84
#14
#F871FF
8× · WCAG 8.0 · ΔE 108
#15
#F6981B
4× · WCAG 8.6 · ΔE 100
#16
#CFAF00
16× · WCAG 8.9 · ΔE 99
#17
#00D27C
2× · WCAG 9.6 · ΔE 97
#18
#D48CC3
4× · WCAG 7.6 · ΔE 76
#19
#9AA1AD
9× · WCAG 7.4 · ΔE 62
#20
#F432FF
52× · WCAG 6.1 · ΔE 125
#21
#CD6AEF
2× · WCAG 6.3 · ΔE 99
#22
#00B0B9
20× · WCAG 7.2 · ΔE 71
#23
#749C00
6× · WCAG 5.9 · ΔE 87
#24
#B77A36
2× · WCAG 5.3 · ΔE 70
#25
#329F42
12× · WCAG 5.6 · ΔE 81
#26
#BD7200
3× · WCAG 5.1 · ΔE 82
#27
#838F00
23× · WCAG 5.4 · ΔE 80
#28
#007B81
2× · WCAG 3.8 · ΔE 51

SQL

15 colors
Co-occurring tokens ΔE min 15.9 · avg 83.8 105/105 pairs ≥ 12 (100%)
Background contrast ΔE min 52.6 · avg 94.5 15/15 colors ≥ 15 (100%)
#01
#ACF685
9× · WCAG 14.8 · ΔE 105
#02
#7FFB00
52× · WCAG 14.3 · ΔE 135
#03
#15FF99
6× · WCAG 14.4 · ΔE 115
#04
#FDBEFF
6× · WCAG 12.7 · ΔE 91
#05
#ACE500
22× · WCAG 12.7 · ΔE 120
#06
#FDABC4
2× · WCAG 10.8 · ΔE 82
#07
#7FD67F
18× · WCAG 10.8 · ΔE 91
#08
#F6981B
5× · WCAG 8.6 · ΔE 100
#09
#00D543
5× · WCAG 9.7 · ΔE 114
#10
#54BBA9
24× · WCAG 8.3 · ΔE 73
#11
#9AA1AD
6× · WCAG 7.4 · ΔE 62
#12
#F432FF
36× · WCAG 6.1 · ΔE 125
#13
#00B0B9
3× · WCAG 7.2 · ΔE 71
#14
#329F42
4× · WCAG 5.6 · ΔE 81
#15
#475995
6× · WCAG 2.9 · ΔE 53