🎨 gitcolors

A GitHub contributions graph in any color for your README 🌈

A simple tool to customize your GitHub contributions graph with any color or theme you want.

Perfect for adding a personal touch to your README — quick and easy, ready in seconds through the website.

See your graph here: https://gitcolors.vercel.app

Features

• 🌈 GitHub contributions graph in any color/theme you want
• Updates automatically based on your GitHub activity
• 🌗 Automatically matches light or dark mode — no need to pick one
• 📱 Looks good on desktop and mobile
• ⚡ Easy to integrate into any README or portfolio
• 💻 Dedicated website to generate and view your graph
• ✨ Beautiful preset themes like Rainbow, Sunset and more
• 🎨 Multiple graph customization options

⚡ Quick Setup

1. Go to https://gitcolors.vercel.app
2. Enter your GitHub username
3. Customize the graph
4. Copy the image
5. Paste into your README
6. Commit and push

Empty cells

Choose how days with no contributions are drawn, with emptyColor:

• tint (default) — outlined in a soft version of your color

• neutral — outlined in gray, more contrast against your color

• filled — solid-filled with GitHub's own gray, closest to the real graph

Display mode

Choose how contribution days are colored, with mode:

• solid (default) — every contribution day gets the full color

• levels — color intensity scales with how many contributions that day had

Themes

• 🌈 Rainbow

• 🌅 Sunset

• 🌊 Wave

• 🎀 Girly

• 💻 Dev

• 🌈 Rainbow2

• 🐙 GitHub (identical to your real contribution graph)

• 🐙💗 GitHub Pink (same fixed 5-tone scale, in pink)

• 🐙💙 GitHub Blue

• 🐙💜 GitHub Purple

• 🐙🧡 GitHub Orange

• 🐙❤️ GitHub Red

Single image (works in light & dark)

Don't want two different images switched by <source>/prefers-color-scheme? Check 🖼️ single image on the site, or set theme=auto directly. One image, same URL either way — the month/day labels switch to a neutral gray and empty-day outlines become a translucent gray, both tuned to stay readable on light and dark backgrounds alike:

<a href="https://gitcolors.vercel.app" target="_blank" rel="noopener">
  <picture>
    <img src="https://gitcolors.vercel.app/api/svg?username=a104437ana&color=ff2d95&theme=auto&mode=mono&preset=rainbow&emptyColor=neutral" width="846" height="164" style="height:auto" />
  </picture>
</a>

API

You can also hit the API directly to generate the image, without going through the site:

https://gitcolors.vercel.app/api/svg?username=YOUR_USERNAME&color=HEX&theme=dark|light|auto&mode=solid|levels&preset=rainbow|sunset|wave|girly|dev|github|githubpink|githubblue|githubpurple|githuborange|githubred&animate=true|false&emptyColor=tint|neutral|filled

• color — hex color, no # (used when preset isn't set)
• theme — dark, light, or auto (single-image mode: a neutral palette that reads fine on either background, no <source> dark/light pair needed)
• mode — solid (flat color) or levels (intensity-based); ignored by the github* presets, which always use their fixed 5-tone scale
• preset — overrides color with a built-in palette (rainbow, sunset, wave, girly, dev, github, githubpink, githubblue, githubpurple, githuborange, githubred)
• animate — set to false to disable the cell fade-in animation (default true)
• emptyColor — tint (default) colors empty-day borders in the same hue as your graph; neutral uses a theme-based gray outline instead; filled solid-fills empty days with GitHub's own gray, for a look closer to the real contribution graph (with theme=auto, filled uses a translucent gray fill instead, since there's no single solid gray that matches both an unknown light and dark background)

🔧 Manual Setup

If you want an image that automatically switches between dark and light depending on the user's system theme, you can set it up like this:

<a href="https://gitcolors.vercel.app" target="_blank" rel="noopener">
  <picture>
    <source srcset="https://gitcolors.vercel.app/api/svg?username=a104437ana&color=ff2d95&theme=dark&mode=mono&preset=dev&emptyColor=neutral" media="(prefers-color-scheme: dark)" />
    <source srcset="https://gitcolors.vercel.app/api/svg?username=a104437ana&color=ff2d95&theme=light&mode=mono&preset=dev&emptyColor=neutral" media="(prefers-color-scheme: light)" />
    <img src="https://gitcolors.vercel.app/api/svg?username=a104437ana&color=ff2d95&theme=light&mode=mono&preset=dev&emptyColor=neutral" width="846" height="164" style="height:auto" />
  </picture>
</a>

Then just replace the values (username, color, theme, mode, preset) with whatever you'd like, following the options described in the API section above.

Prefer a single image over the <source> dark/light pair? Use theme=auto and drop the <source> tags (keep the <picture> wrapper):

<a href="https://gitcolors.vercel.app" target="_blank" rel="noopener">
  <picture>
    <img src="https://gitcolors.vercel.app/api/svg?username=a104437ana&color=ff2d95&theme=auto&mode=mono&preset=dev&emptyColor=neutral" width="846" height="164" style="height:auto" />
  </picture>
</a>

🚀 Advanced Setup

1. Create .github/workflows/gitcolors.yml
2. Copy the code below

name: gitcolors

on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:
  push:
    branches:
      - main
    paths:
      - '.github/workflows/gitcolors.yml'

jobs:
  generate:
    runs-on: ubuntu-latest
    permissions:
      contents: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Generate gitcolors graph
        uses: a104437ana/gitcolors@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITCOLORS_COLOR: ff2d95
          GITCOLORS_MODE: solid
          GITCOLORS_PRESET: rainbow
          GITCOLORS_ANIMATE: "true"
          GITCOLORS_EMPTY_COLOR: neutral

      - name: Commit and push
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git checkout --orphan output
          git add gitcolors.svg gitcolors-dark.svg
          git commit -m "Update gitcolors graph" || exit 0
          git push -f origin output

3. Paste into the file you just created
4. Copy the code below

<a href="https://gitcolors.vercel.app" target="_blank" rel="noopener">
  <picture>
    <source srcset="https://raw.githubusercontent.com/your-github-username/your-github-username/output/gitcolors-dark.svg" media="(prefers-color-scheme: dark)" width="846" height="164" style="height:auto" />
    <source srcset="https://raw.githubusercontent.com/your-github-username/your-github-username/output/gitcolors.svg" media="(prefers-color-scheme: light)" width="846" height="164" style="height:auto" />
    <img src="https://raw.githubusercontent.com/your-github-username/your-github-username/output/gitcolors.svg" width="846" height="164" style="height:auto" />
  </picture>
</a>

5. Replace your-github-username with your GitHub username
6. Paste into your README

GITCOLORS_COLOR, GITCOLORS_MODE, GITCOLORS_PRESET, GITCOLORS_ANIMATE and GITCOLORS_EMPTY_COLOR are all optional and follow the same options described in the API section above — remove any you don't need.

⚠️ The graph may take a minute to appear after the workflow runs for the first time, but after that it will always be there and update automatically every day based on your GitHub activity

Also check out

Want your GitHub contributions as a garden of flowers instead? Check out sakura garden

Support

If you like this project, please consider giving it a star ⭐

Stars