ghosh/uigradients

★ 5,992VueAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((uiGradients))
    What it is
      JSON gradient list
      Named color pairs
      Community maintained
    Data Format
      Gradient name
      HEX color values
      Single JSON file
    Community Builds
      UIColor iOS extension
      React styled-components
      SCSS port
      iOS browsing apps
    Contributing
      Fork the repo
      Append to JSON
      Submit pull request
    Audience
      Designers
      Web developers
      iOS developers

mindmap root((uiGradients)) What it is JSON gradient list Named color pairs Community maintained Data Format Gradient name HEX color values Single JSON file Community Builds UIColor iOS extension React styled-components SCSS port iOS browsing apps Contributing Fork the repo Append to JSON Submit pull request Audience Designers Web developers iOS developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Fetch the raw gradients.json file from GitHub and use the named gradient data in a web or mobile app color picker.

USE CASE 2

Browse the collection to pick a gradient name and hex values for a UI background, card, or button design.

USE CASE 3

Add a new named gradient to the community collection by appending two hex color values to the JSON file and opening a pull request.

Tech stack

JSONVue

Getting it running

Difficulty · easy Time to first run · 5min

Free to use for any purpose including commercial projects, as long as you keep the copyright notice.

In plain English

uiGradients is a community-maintained collection of named color gradients for use in design work and web development. Every gradient in the project is stored as a single JSON entry containing a name and a list of two or more HEX color values. The entire collection lives in one file, gradients.json, at the root of the repository. There is no build system or runtime component, the file itself is the deliverable. The collection is publicly accessible without authentication. Fetching the raw file from GitHub returns all gradient definitions in a format any programming language can parse in a few lines. The README does not describe a web interface or design tool, the project's value is the data, not an application built on top of it. A number of community projects have built on this dataset. These include a UIColor extension for iOS, a Swift color library, styled-component wrappers for React, an SCSS port, a Handlebars template helper, and standalone iOS apps for browsing and picking gradients from the collection. The README links to each of these. Contributing a new gradient requires no special setup. Fork the repository, append an entry to gradients.json with a chosen name and at least two HEX color values, and submit a pull request. The README asks that gradient submissions and bug fixes be kept in separate pull requests to keep reviews straightforward. The JSON structure is minimal, so the barrier to contributing is low. The project is released under the MIT license. The README is brief, most of the project's value is conveyed by the data file itself.

Copy-paste prompts

Prompt 1

I want to use the uiGradients dataset in my React app. How do I fetch the raw gradients.json file from GitHub and display a color picker that previews each gradient?

Prompt 2

I designed a new gradient called Sunset Breeze using three hex colors. How do I add it to the uiGradients collection and submit it as a pull request?

Prompt 3

I'm building an iOS app and want to use the uiGradients data. Which of the community libraries listed in the README gives me UIColor extensions from this dataset?

Open on GitHub → Explain another repo

← ghosh on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.