All Projects → meodai → farbvelo

meodai / farbvelo

Licence: CC-BY-SA-4.0 license
"Random" color palette generator, cycles

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
Pug
443 projects

Projects that are alternatives of or similar to farbvelo

Prism
Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.
Stars: ✭ 308 (+492.31%)
Mutual labels:  design-tools, design-system
word-color
Finds colors associated with a word, basically https://picular.co/
Stars: ✭ 39 (-25%)
Mutual labels:  color, design-tools
Design-Resources
A curated list of design resources from design templates, stock photos, icons, colors, and much more.
Stars: ✭ 943 (+1713.46%)
Mutual labels:  design-tools, design-system
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (+7880.77%)
Mutual labels:  color, design-system
Sketch
Sketch have a lot of basic functions to develop a drawing app for iPhone. Anyone can easily create drawing iOS Application.
Stars: ✭ 229 (+340.38%)
Mutual labels:  color, design-tools
theme-ui-native
Build consistent, themeable React Native apps based on constraint-based design principles
Stars: ✭ 67 (+28.85%)
Mutual labels:  color, design-system
Move To Library Sketchplugin
You can now move symbol from your project to any library and re-attach all the symbol instances to this library. also it keep the overrides without any problems and it work with abstract that have libraries not in your local machine
Stars: ✭ 174 (+234.62%)
Mutual labels:  design-tools, design-system
Chromatic Sketch
Sketch plugin for creating good-looking and perceptually uniform gradients and color scales.
Stars: ✭ 445 (+755.77%)
Mutual labels:  color, design-tools
Doric
Protocol oriented, type safe, scalable design system foundation swift framework for iOS.
Stars: ✭ 75 (+44.23%)
Mutual labels:  color, design-system
colors
A gorgeous, accessible color system.
Stars: ✭ 748 (+1338.46%)
Mutual labels:  color, design-system
rebass
⚛️ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+14984.62%)
Mutual labels:  color, design-system
log-utils
Basic logging utils: colors, symbols and timestamp.
Stars: ✭ 24 (-53.85%)
Mutual labels:  color
reinvented-color-wheel
A vanilla-js touch-friendly HSV color picker inspired by Farbtastic Color Picker.
Stars: ✭ 43 (-17.31%)
Mutual labels:  color
book-mdpc
Il cinema tra le righe... di codice!
Stars: ✭ 59 (+13.46%)
Mutual labels:  generative-art
GAS
Generative Art Synthesizer - a python program that generates python programs that generates generative art
Stars: ✭ 42 (-19.23%)
Mutual labels:  generative-art
dorai-ui
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems
Stars: ✭ 34 (-34.62%)
Mutual labels:  design-system
yachalk
🖍️ Terminal string styling done right
Stars: ✭ 131 (+151.92%)
Mutual labels:  color
2d-diffusion-limited-aggregation-experiments
Visual experiments exploring diffusion-limited aggregation (DLA) as a 2D morphogenesis tool.
Stars: ✭ 41 (-21.15%)
Mutual labels:  generative-art
re-cite
Manage citations from your colleagues , friends, movies, your cat or even yourself.
Stars: ✭ 20 (-61.54%)
Mutual labels:  design-system
playbook
Playbook Design System
Stars: ✭ 17 (-67.31%)
Mutual labels:  design-system

FarbVelo

"Random" color palette generator.

Farbvelo

FarbVelo (Swiss-German for color bicycle) is a playful color picking tool. It uses simple rules and lots of random numbers to help you come up with pleasing color combinations or just chill while cycling through color harmonies (I almost find it a bit psychedelic while listening to custom made white noise).

About

  1. Picking ℕ0 hue's (color stops) using HSLuv at a user defined minimum angle ∠.
  2. Interpolating between color stops in CIE Lab* by default, using chroma.js.
  3. Finding pleasing color names using the color name API
  4. Icons made by Ravindra Kalkani.
  5. Originally released as a Codepen.
  6. Source is on github and licensed under a Creative Commons Attribution Share Alike 4.0 license.

Engine

If you are anything like me, you are probably here to find out how the color picking works. Since this code is based on an old project and the code is very messy, let me help you:

// minHueDiffAngle = 60

// create an array of hues to pick from.
  const baseHue = random(0, 360);
  const hues = new Array(Math.round( 360 / minHueDiffAngle) ).fill('').map((offset, i) => {
    return (baseHue + i * minHueDiffAngle) % 360;
  });

  //  low saturation color
  const baseSaturation = random(5, 40);
  const baseLightness = random(0, 20);
  const rangeLightness = 90 - baseLightness;

  colors.push(
    hsluvToHex([
      hues[0],
      baseSaturation,
      baseLightness * random(0.25, 0.75),
    ])
  );

  // random shades
  const minSat = random(50, 70);
  const maxSat = minSat + 30;
  const minLight = random(35, 70);
  const maxLight = Math.min(minLight + random(20, 40), 95);
  // const lightDiff = maxLight - minLight;

  const remainingHues = [...hues];

  for (let i = 0; i < parts - 2; i++) {
    const hue = remainingHues.splice(random(0, remainingHues.length - 1),1)[0];
    const saturation = random(minSat, maxSat);
    const light = baseLightness + random(0,10) + ((rangeLightness/(parts - 1)) * i);

    colors.push( 
      hsluvToHex([
        hue,
        saturation,
        random(light, maxLight),
      ])
    )
  }
  
  colors.push( 
    hsluvToHex([
      remainingHues[0],
      baseSaturation,
      rangeLightness + 10,
    ])
  );

  chroma.scale(colors)
        .padding(.175)
        .mode('lab')
        .colors(6);

Techstack & Credits

  • Icons: iconoir
  • Vue
  • Chroma.js
  • Inter Font
  • Space Mono Font

Samples

sample screenshot of color bingo engine sample screenshot of color bingo engine sample screenshot of color bingo engine sample screenshot of color bingo engine sample screenshot of color bingo engine sample screenshot of color bingo engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine sample screenshot of legacy engine

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].