Links

View on PyPI

AI / Agents

Skills
llms.txt
llms-full.txt

Navbar Color Showcase

This site demonstrates the navbar_color configuration option in Great Docs. Look at the navbar above — its background color and text color are automatically paired for maximum contrast using the APCA algorithm.

Visit the User Guide to see a comprehensive grid of color swatches showing how the algorithm selects light or dark text for over 100 different background colors.

Visual showcase of navbar_color with the APCA contrast algorithm. Uses per-mode colors (charcoal light, indigo dark) and displays a swatch grid of 97 colors with APCA-chosen text colors.

Source files

📁 gdtest_navbar_color/

📄 __init__.py

"""
APCA Navbar Color Showcase
==========================

This package demonstrates the ``navbar_color`` configuration option
in Great Docs, which uses the APCA (Accessible Perceptual Contrast
Algorithm) to automatically choose light or dark text for maximum
readability against any navbar background color.
"""

__version__ = "0.1.0"
__all__ = ["contrast_ratio", "ideal_text_color"]


def contrast_ratio(bg_color: str, fg_color: str) -> float:
    """
    Compute the APCA contrast ratio between two colors.

    Parameters
    ----------
    bg_color
        Background color as a hex string (e.g., ``"#2c3e50"``).
    fg_color
        Foreground (text) color as a hex string.

    Returns
    -------
    float
        The APCA Lc contrast value. Higher absolute values
        indicate stronger contrast.

    Examples
    --------
    >>> contrast_ratio("#000000", "#FFFFFF")
    106.04
    >>> contrast_ratio("#FFFFFF", "#000000")
    -107.88
    """
    return 0.0


def ideal_text_color(bg_color: str) -> str:
    """
    Choose the best text color (light or dark) for a background.

    Uses the APCA algorithm to determine whether white or black
    text provides better contrast against the given background.

    Parameters
    ----------
    bg_color
        Background color as a hex string or CSS named color.

    Returns
    -------
    str
        Either ``"#FFFFFF"`` (white) or ``"#000000"`` (black).

    Examples
    --------
    >>> ideal_text_color("#2c3e50")
    '#FFFFFF'
    >>> ideal_text_color("#e3f2fd")
    '#000000'
    >>> ideal_text_color("navy")
    '#FFFFFF'
    """
    return "#FFFFFF"

📁 user_guide/

📄 01-contrast-showcase.qmd

---
title: "APCA Contrast Showcase"
---

## How `navbar_color` Works

When you set `navbar_color` in your `great-docs.yml`, Great Docs
uses the **APCA (Accessible Perceptual Contrast Algorithm)** to
automatically determine whether the navbar text, icons, and
controls should be **light** (white) or **dark** (black).

This page shows the algorithm's choices across **97
different background colors** spanning the entire spectrum.

### Configuration for This Site

This site uses per-mode navbar colors:

```yaml
navbar_color:
  light: "#2c3e50"   # Charcoal (gets white text)
  dark: "#1a237e"    # Deep indigo (gets white text)
```

You can also set a single color for both modes:

```yaml
navbar_color: steelblue
```

## Color Swatch Grid

Each row shows a background color with the APCA-selected text
color rendered on top. The **Hex** and **Name** columns use
the computed text color directly on the background, so you can
judge readability at a glance.

<div style="overflow-x:auto;">
<table style="border-collapse:collapse;width:100%;margin:1.5em 0;">
<thead>
<tr style="border-bottom:2px solid var(--gd-border-color,#ccc);">
  <th style="padding:8px 16px;text-align:left;">Hex</th>
  <th style="padding:8px 12px;text-align:left;">Name</th>
  <th style="padding:8px 12px;text-align:left;">RGB</th>
  <th style="padding:8px 12px;text-align:left;">Text Choice</th>
</tr>
</thead>
<tbody>
  <tr><td style="background:#FF0000;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF0000</td><td style="background:#FF0000;color:#FFFFFF;padding:10px 12px;font-size:14px;">Red</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,0,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#FF0000;">white</td></tr>
  <tr><td style="background:#DC143C;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#DC143C</td><td style="background:#DC143C;color:#FFFFFF;padding:10px 12px;font-size:14px;">Crimson</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(220,20,60)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#DC143C;">white</td></tr>
  <tr><td style="background:#8B0000;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#8B0000</td><td style="background:#8B0000;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dark Red</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(139,0,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#8B0000;">white</td></tr>
  <tr><td style="background:#FF6347;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF6347</td><td style="background:#FF6347;color:#FFFFFF;padding:10px 12px;font-size:14px;">Tomato</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,99,71)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#FF6347;">white</td></tr>
  <tr><td style="background:#CD5C5C;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#CD5C5C</td><td style="background:#CD5C5C;color:#FFFFFF;padding:10px 12px;font-size:14px;">Indian Red</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(205,92,92)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#CD5C5C;">white</td></tr>
  <tr><td style="background:#F08080;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#F08080</td><td style="background:#F08080;color:#FFFFFF;padding:10px 12px;font-size:14px;">Light Coral</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(240,128,128)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#F08080;">white</td></tr>
  <tr><td style="background:#FF4500;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF4500</td><td style="background:#FF4500;color:#FFFFFF;padding:10px 12px;font-size:14px;">Orange Red</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,69,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#FF4500;">white</td></tr>
  <tr><td style="background:#FF8C00;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF8C00</td><td style="background:#FF8C00;color:#000000;padding:10px 12px;font-size:14px;">Dark Orange</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,140,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FF8C00;">black</td></tr>
  <tr><td style="background:#FFA500;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFA500</td><td style="background:#FFA500;color:#000000;padding:10px 12px;font-size:14px;">Orange</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,165,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFA500;">black</td></tr>
  <tr><td style="background:#FF7F50;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF7F50</td><td style="background:#FF7F50;color:#000000;padding:10px 12px;font-size:14px;">Coral</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,127,80)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FF7F50;">black</td></tr>
  <tr><td style="background:#E9967A;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#E9967A</td><td style="background:#E9967A;color:#000000;padding:10px 12px;font-size:14px;">Dark Salmon</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(233,150,122)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#E9967A;">black</td></tr>
  <tr><td style="background:#FA8072;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FA8072</td><td style="background:#FA8072;color:#000000;padding:10px 12px;font-size:14px;">Salmon</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(250,128,114)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FA8072;">black</td></tr>
  <tr><td style="background:#FFD700;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFD700</td><td style="background:#FFD700;color:#000000;padding:10px 12px;font-size:14px;">Gold</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,215,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFD700;">black</td></tr>
  <tr><td style="background:#FFFF00;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFFF00</td><td style="background:#FFFF00;color:#000000;padding:10px 12px;font-size:14px;">Yellow</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,255,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFFF00;">black</td></tr>
  <tr><td style="background:#F0E68C;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#F0E68C</td><td style="background:#F0E68C;color:#000000;padding:10px 12px;font-size:14px;">Khaki</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(240,230,140)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#F0E68C;">black</td></tr>
  <tr><td style="background:#FAFAD2;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FAFAD2</td><td style="background:#FAFAD2;color:#000000;padding:10px 12px;font-size:14px;">Lt Goldenrod</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(250,250,210)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FAFAD2;">black</td></tr>
  <tr><td style="background:#FFFACD;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFFACD</td><td style="background:#FFFACD;color:#000000;padding:10px 12px;font-size:14px;">Lemon Chiffon</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,250,205)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFFACD;">black</td></tr>
  <tr><td style="background:#EEE8AA;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#EEE8AA</td><td style="background:#EEE8AA;color:#000000;padding:10px 12px;font-size:14px;">Pale Goldenrod</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(238,232,170)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#EEE8AA;">black</td></tr>
  <tr><td style="background:#006400;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#006400</td><td style="background:#006400;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dark Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,100,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#006400;">white</td></tr>
  <tr><td style="background:#008000;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#008000</td><td style="background:#008000;color:#FFFFFF;padding:10px 12px;font-size:14px;">Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,128,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#008000;">white</td></tr>
  <tr><td style="background:#228B22;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#228B22</td><td style="background:#228B22;color:#FFFFFF;padding:10px 12px;font-size:14px;">Forest Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(34,139,34)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#228B22;">white</td></tr>
  <tr><td style="background:#2E8B57;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#2E8B57</td><td style="background:#2E8B57;color:#FFFFFF;padding:10px 12px;font-size:14px;">Sea Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(46,139,87)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#2E8B57;">white</td></tr>
  <tr><td style="background:#32CD32;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#32CD32</td><td style="background:#32CD32;color:#000000;padding:10px 12px;font-size:14px;">Lime Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(50,205,50)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#32CD32;">black</td></tr>
  <tr><td style="background:#00FF00;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#00FF00</td><td style="background:#00FF00;color:#000000;padding:10px 12px;font-size:14px;">Lime</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,255,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#00FF00;">black</td></tr>
  <tr><td style="background:#90EE90;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#90EE90</td><td style="background:#90EE90;color:#000000;padding:10px 12px;font-size:14px;">Light Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(144,238,144)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#90EE90;">black</td></tr>
  <tr><td style="background:#98FB98;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#98FB98</td><td style="background:#98FB98;color:#000000;padding:10px 12px;font-size:14px;">Pale Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(152,251,152)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#98FB98;">black</td></tr>
  <tr><td style="background:#ADFF2F;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#ADFF2F</td><td style="background:#ADFF2F;color:#000000;padding:10px 12px;font-size:14px;">Green Yellow</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(173,255,47)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#ADFF2F;">black</td></tr>
  <tr><td style="background:#008080;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#008080</td><td style="background:#008080;color:#FFFFFF;padding:10px 12px;font-size:14px;">Teal</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,128,128)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#008080;">white</td></tr>
  <tr><td style="background:#008B8B;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#008B8B</td><td style="background:#008B8B;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dark Cyan</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,139,139)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#008B8B;">white</td></tr>
  <tr><td style="background:#20B2AA;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#20B2AA</td><td style="background:#20B2AA;color:#FFFFFF;padding:10px 12px;font-size:14px;">Lt Sea Green</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(32,178,170)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#20B2AA;">white</td></tr>
  <tr><td style="background:#00CED1;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#00CED1</td><td style="background:#00CED1;color:#000000;padding:10px 12px;font-size:14px;">Dark Turquoise</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,206,209)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#00CED1;">black</td></tr>
  <tr><td style="background:#40E0D0;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#40E0D0</td><td style="background:#40E0D0;color:#000000;padding:10px 12px;font-size:14px;">Turquoise</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(64,224,208)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#40E0D0;">black</td></tr>
  <tr><td style="background:#00FFFF;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#00FFFF</td><td style="background:#00FFFF;color:#000000;padding:10px 12px;font-size:14px;">Cyan</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,255,255)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#00FFFF;">black</td></tr>
  <tr><td style="background:#E0FFFF;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#E0FFFF</td><td style="background:#E0FFFF;color:#000000;padding:10px 12px;font-size:14px;">Light Cyan</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(224,255,255)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#E0FFFF;">black</td></tr>
  <tr><td style="background:#000080;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#000080</td><td style="background:#000080;color:#FFFFFF;padding:10px 12px;font-size:14px;">Navy</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,0,128)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#000080;">white</td></tr>
  <tr><td style="background:#00008B;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#00008B</td><td style="background:#00008B;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dark Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,0,139)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#00008B;">white</td></tr>
  <tr><td style="background:#0000FF;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#0000FF</td><td style="background:#0000FF;color:#FFFFFF;padding:10px 12px;font-size:14px;">Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,0,255)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#0000FF;">white</td></tr>
  <tr><td style="background:#191970;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#191970</td><td style="background:#191970;color:#FFFFFF;padding:10px 12px;font-size:14px;">Midnight Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(25,25,112)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#191970;">white</td></tr>
  <tr><td style="background:#4169E1;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#4169E1</td><td style="background:#4169E1;color:#FFFFFF;padding:10px 12px;font-size:14px;">Royal Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(65,105,225)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#4169E1;">white</td></tr>
  <tr><td style="background:#4682B4;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#4682B4</td><td style="background:#4682B4;color:#FFFFFF;padding:10px 12px;font-size:14px;">Steel Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(70,130,180)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#4682B4;">white</td></tr>
  <tr><td style="background:#1E90FF;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#1E90FF</td><td style="background:#1E90FF;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dodger Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(30,144,255)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#1E90FF;">white</td></tr>
  <tr><td style="background:#6495ED;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#6495ED</td><td style="background:#6495ED;color:#FFFFFF;padding:10px 12px;font-size:14px;">Cornflower Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(100,149,237)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#6495ED;">white</td></tr>
  <tr><td style="background:#87CEEB;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#87CEEB</td><td style="background:#87CEEB;color:#000000;padding:10px 12px;font-size:14px;">Sky Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(135,206,235)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#87CEEB;">black</td></tr>
  <tr><td style="background:#ADD8E6;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#ADD8E6</td><td style="background:#ADD8E6;color:#000000;padding:10px 12px;font-size:14px;">Light Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(173,216,230)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#ADD8E6;">black</td></tr>
  <tr><td style="background:#B0E0E6;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#B0E0E6</td><td style="background:#B0E0E6;color:#000000;padding:10px 12px;font-size:14px;">Powder Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(176,224,230)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#B0E0E6;">black</td></tr>
  <tr><td style="background:#E3F2FD;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#E3F2FD</td><td style="background:#E3F2FD;color:#000000;padding:10px 12px;font-size:14px;">Ice Blue</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(227,242,253)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#E3F2FD;">black</td></tr>
  <tr><td style="background:#4B0082;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#4B0082</td><td style="background:#4B0082;color:#FFFFFF;padding:10px 12px;font-size:14px;">Indigo</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(75,0,130)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#4B0082;">white</td></tr>
  <tr><td style="background:#663399;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#663399</td><td style="background:#663399;color:#FFFFFF;padding:10px 12px;font-size:14px;">Rebecca Purple</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(102,51,153)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#663399;">white</td></tr>
  <tr><td style="background:#800080;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#800080</td><td style="background:#800080;color:#FFFFFF;padding:10px 12px;font-size:14px;">Purple</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(128,0,128)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#800080;">white</td></tr>
  <tr><td style="background:#8B008B;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#8B008B</td><td style="background:#8B008B;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dark Magenta</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(139,0,139)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#8B008B;">white</td></tr>
  <tr><td style="background:#9370DB;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#9370DB</td><td style="background:#9370DB;color:#FFFFFF;padding:10px 12px;font-size:14px;">Medium Purple</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(147,112,219)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#9370DB;">white</td></tr>
  <tr><td style="background:#BA55D3;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#BA55D3</td><td style="background:#BA55D3;color:#FFFFFF;padding:10px 12px;font-size:14px;">Medium Orchid</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(186,85,211)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#BA55D3;">white</td></tr>
  <tr><td style="background:#DA70D6;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#DA70D6</td><td style="background:#DA70D6;color:#FFFFFF;padding:10px 12px;font-size:14px;">Orchid</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(218,112,214)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#DA70D6;">white</td></tr>
  <tr><td style="background:#DDA0DD;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#DDA0DD</td><td style="background:#DDA0DD;color:#000000;padding:10px 12px;font-size:14px;">Plum</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(221,160,221)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#DDA0DD;">black</td></tr>
  <tr><td style="background:#E6E6FA;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#E6E6FA</td><td style="background:#E6E6FA;color:#000000;padding:10px 12px;font-size:14px;">Lavender</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(230,230,250)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#E6E6FA;">black</td></tr>
  <tr><td style="background:#C71585;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#C71585</td><td style="background:#C71585;color:#FFFFFF;padding:10px 12px;font-size:14px;">Med Violet Red</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(199,21,133)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#C71585;">white</td></tr>
  <tr><td style="background:#FF1493;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF1493</td><td style="background:#FF1493;color:#FFFFFF;padding:10px 12px;font-size:14px;">Deep Pink</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,20,147)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#FF1493;">white</td></tr>
  <tr><td style="background:#FF69B4;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FF69B4</td><td style="background:#FF69B4;color:#FFFFFF;padding:10px 12px;font-size:14px;">Hot Pink</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,105,180)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#FF69B4;">white</td></tr>
  <tr><td style="background:#FFB6C1;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFB6C1</td><td style="background:#FFB6C1;color:#000000;padding:10px 12px;font-size:14px;">Light Pink</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,182,193)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFB6C1;">black</td></tr>
  <tr><td style="background:#FFC0CB;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFC0CB</td><td style="background:#FFC0CB;color:#000000;padding:10px 12px;font-size:14px;">Pink</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,192,203)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFC0CB;">black</td></tr>
  <tr><td style="background:#FFF0F5;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFF0F5</td><td style="background:#FFF0F5;color:#000000;padding:10px 12px;font-size:14px;">Lavender Blush</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,240,245)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFF0F5;">black</td></tr>
  <tr><td style="background:#8B4513;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#8B4513</td><td style="background:#8B4513;color:#FFFFFF;padding:10px 12px;font-size:14px;">Saddle Brown</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(139,69,19)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#8B4513;">white</td></tr>
  <tr><td style="background:#A0522D;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#A0522D</td><td style="background:#A0522D;color:#FFFFFF;padding:10px 12px;font-size:14px;">Sienna</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(160,82,45)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#A0522D;">white</td></tr>
  <tr><td style="background:#D2691E;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#D2691E</td><td style="background:#D2691E;color:#FFFFFF;padding:10px 12px;font-size:14px;">Chocolate</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(210,105,30)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#D2691E;">white</td></tr>
  <tr><td style="background:#CD853F;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#CD853F</td><td style="background:#CD853F;color:#FFFFFF;padding:10px 12px;font-size:14px;">Peru</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(205,133,63)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#CD853F;">white</td></tr>
  <tr><td style="background:#DEB887;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#DEB887</td><td style="background:#DEB887;color:#000000;padding:10px 12px;font-size:14px;">Burlywood</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(222,184,135)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#DEB887;">black</td></tr>
  <tr><td style="background:#F5DEB3;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#F5DEB3</td><td style="background:#F5DEB3;color:#000000;padding:10px 12px;font-size:14px;">Wheat</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(245,222,179)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#F5DEB3;">black</td></tr>
  <tr><td style="background:#000000;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#000000</td><td style="background:#000000;color:#FFFFFF;padding:10px 12px;font-size:14px;">Black</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(0,0,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#000000;">white</td></tr>
  <tr><td style="background:#1a1a1a;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#1a1a1a</td><td style="background:#1a1a1a;color:#FFFFFF;padding:10px 12px;font-size:14px;">#1a1a1a</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(26,26,26)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#1a1a1a;">white</td></tr>
  <tr><td style="background:#333333;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#333333</td><td style="background:#333333;color:#FFFFFF;padding:10px 12px;font-size:14px;">#333333</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(51,51,51)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#333333;">white</td></tr>
  <tr><td style="background:#555555;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#555555</td><td style="background:#555555;color:#FFFFFF;padding:10px 12px;font-size:14px;">#555555</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(85,85,85)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#555555;">white</td></tr>
  <tr><td style="background:#696969;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#696969</td><td style="background:#696969;color:#FFFFFF;padding:10px 12px;font-size:14px;">Dim Gray</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(105,105,105)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#696969;">white</td></tr>
  <tr><td style="background:#808080;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#808080</td><td style="background:#808080;color:#FFFFFF;padding:10px 12px;font-size:14px;">Gray</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(128,128,128)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#808080;">white</td></tr>
  <tr><td style="background:#A9A9A9;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#A9A9A9</td><td style="background:#A9A9A9;color:#000000;padding:10px 12px;font-size:14px;">Dark Gray</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(169,169,169)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#A9A9A9;">black</td></tr>
  <tr><td style="background:#C0C0C0;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#C0C0C0</td><td style="background:#C0C0C0;color:#000000;padding:10px 12px;font-size:14px;">Silver</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(192,192,192)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#C0C0C0;">black</td></tr>
  <tr><td style="background:#D3D3D3;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#D3D3D3</td><td style="background:#D3D3D3;color:#000000;padding:10px 12px;font-size:14px;">Light Gray</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(211,211,211)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#D3D3D3;">black</td></tr>
  <tr><td style="background:#F5F5F5;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#F5F5F5</td><td style="background:#F5F5F5;color:#000000;padding:10px 12px;font-size:14px;">White Smoke</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(245,245,245)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#F5F5F5;">black</td></tr>
  <tr><td style="background:#FFFFFF;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#FFFFFF</td><td style="background:#FFFFFF;color:#000000;padding:10px 12px;font-size:14px;">White</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(255,255,255)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#FFFFFF;">black</td></tr>
  <tr><td style="background:#2c3e50;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#2c3e50</td><td style="background:#2c3e50;color:#FFFFFF;padding:10px 12px;font-size:14px;">Charcoal</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(44,62,80)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#2c3e50;">white</td></tr>
  <tr><td style="background:#34495e;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#34495e</td><td style="background:#34495e;color:#FFFFFF;padding:10px 12px;font-size:14px;">Wet Asphalt</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(52,73,94)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#34495e;">white</td></tr>
  <tr><td style="background:#1abc9c;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#1abc9c</td><td style="background:#1abc9c;color:#000000;padding:10px 12px;font-size:14px;">Turquoise</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(26,188,156)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#1abc9c;">black</td></tr>
  <tr><td style="background:#2ecc71;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#2ecc71</td><td style="background:#2ecc71;color:#000000;padding:10px 12px;font-size:14px;">Emerald</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(46,204,113)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#2ecc71;">black</td></tr>
  <tr><td style="background:#3498db;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#3498db</td><td style="background:#3498db;color:#FFFFFF;padding:10px 12px;font-size:14px;">Peter River</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(52,152,219)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#3498db;">white</td></tr>
  <tr><td style="background:#9b59b6;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#9b59b6</td><td style="background:#9b59b6;color:#FFFFFF;padding:10px 12px;font-size:14px;">Amethyst</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(155,89,182)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#9b59b6;">white</td></tr>
  <tr><td style="background:#e74c3c;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#e74c3c</td><td style="background:#e74c3c;color:#FFFFFF;padding:10px 12px;font-size:14px;">Alizarin</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(231,76,60)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#e74c3c;">white</td></tr>
  <tr><td style="background:#f39c12;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#f39c12</td><td style="background:#f39c12;color:#000000;padding:10px 12px;font-size:14px;">Sun Flower</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(243,156,18)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#f39c12;">black</td></tr>
  <tr><td style="background:#e67e22;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#e67e22</td><td style="background:#e67e22;color:#FFFFFF;padding:10px 12px;font-size:14px;">Carrot</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(230,126,34)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#e67e22;">white</td></tr>
  <tr><td style="background:#ecf0f1;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#ecf0f1</td><td style="background:#ecf0f1;color:#000000;padding:10px 12px;font-size:14px;">Clouds</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(236,240,241)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#ecf0f1;">black</td></tr>
  <tr><td style="background:#bdc3c7;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#bdc3c7</td><td style="background:#bdc3c7;color:#000000;padding:10px 12px;font-size:14px;">Silver Cloud</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(189,195,199)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#bdc3c7;">black</td></tr>
  <tr><td style="background:#7f8c8d;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#7f8c8d</td><td style="background:#7f8c8d;color:#FFFFFF;padding:10px 12px;font-size:14px;">Asbestos</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(127,140,141)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#7f8c8d;">white</td></tr>
  <tr><td style="background:#27ae60;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#27ae60</td><td style="background:#27ae60;color:#FFFFFF;padding:10px 12px;font-size:14px;">Nephritis</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(39,174,96)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#27ae60;">white</td></tr>
  <tr><td style="background:#16a085;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#16a085</td><td style="background:#16a085;color:#FFFFFF;padding:10px 12px;font-size:14px;">Green Sea</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(22,160,133)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#16a085;">white</td></tr>
  <tr><td style="background:#2980b9;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#2980b9</td><td style="background:#2980b9;color:#FFFFFF;padding:10px 12px;font-size:14px;">Belize Hole</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(41,128,185)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#2980b9;">white</td></tr>
  <tr><td style="background:#8e44ad;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#8e44ad</td><td style="background:#8e44ad;color:#FFFFFF;padding:10px 12px;font-size:14px;">Wisteria</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(142,68,173)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#8e44ad;">white</td></tr>
  <tr><td style="background:#f1c40f;color:#000000;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#f1c40f</td><td style="background:#f1c40f;color:#000000;padding:10px 12px;font-size:14px;">Sunflower</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(241,196,15)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#000000;background:#f1c40f;">black</td></tr>
  <tr><td style="background:#d35400;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#d35400</td><td style="background:#d35400;color:#FFFFFF;padding:10px 12px;font-size:14px;">Pumpkin</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(211,84,0)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#d35400;">white</td></tr>
  <tr><td style="background:#c0392b;color:#FFFFFF;padding:10px 16px;font-weight:600;font-size:15px;font-family:monospace;min-width:120px;text-align:center;">#c0392b</td><td style="background:#c0392b;color:#FFFFFF;padding:10px 12px;font-size:14px;">Pomegranate</td><td style="padding:10px 12px;font-size:14px;font-family:monospace;">rgb(192,57,43)</td><td style="padding:10px 12px;font-size:14px;font-weight:600;font-family:monospace;color:#FFFFFF;background:#c0392b;">white</td></tr>
</tbody>
</table>
</div>

## About the APCA Algorithm

The APCA (Accessible Perceptual Contrast Algorithm) is a modern
replacement for the WCAG 2.x contrast ratio. Key advantages:

- **Perceptually uniform**: matches how humans actually perceive
  contrast, unlike the simple luminance ratio in WCAG 2.x.
- **Polarity-aware**: treats dark-on-light differently from
  light-on-dark, reflecting the asymmetry in human vision.
- **Better mid-range decisions**: WCAG 2.x often fails for
  medium-tone colors; APCA handles these correctly.

The implementation is ported from the
[gt R package](https://github.com/rstudio/gt), using
SAPC APCA Beta 0.0.98G-4g coefficients.

📄 README.md

# Navbar Color Showcase

This site demonstrates the `navbar_color` configuration option in
Great Docs. Look at the navbar above — its background color and
text color are automatically paired for maximum contrast using
the APCA algorithm.

Visit the **User Guide** to see a comprehensive grid of color
swatches showing how the algorithm selects light or dark text
for over 100 different background colors.

📄 great-docs.yml

navbar_color:
  light: "#2c3e50"
  dark: "#1a237e"
display_name: Navbar Color Showcase