🎨 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

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&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 or light
• 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

🔧 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.

🚀 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