DEV Community

Cover image for I created a library for mobile developers who cares about color.
Everaldo Junior
Everaldo Junior

Posted on

I created a library for mobile developers who cares about color.

You know that moment when you needed a color to be a little bit lighter or darker?

But you don't want to manually make it lighter or darker?

Well... me too.

So that's why a created react-native-color-toolkit

With this library you can have access to a lot of color modification functions like:

  • brighten
  • darken
  • desaturate
  • greyscale
  • lighten
  • saturate

Let's imagine an example where you have a color, but you want that color to be 50% darker, with react-native-color-toolkit you just need to call a function like this:

<View  style={{justifyContent:  'center', alignItems:  'center'}}>
    <View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
    <Text  style={styles.subtitle}>Original color</Text>
</View>
<View  style={{justifyContent:  'center', alignItems:  'center'}}>
    <View  style={[styles.box, {backgroundColor: darken('#2196F3', 0.5)}]} />
    <Text  style={styles.subtitle}>Modified color</Text>
</View>
Enter fullscreen mode Exit fullscreen mode

Will give you this result:

Image description


react-native-color-toolkit also have also have

  • Conversion functions (like rgb to Hsl)
  • Utility functions (like get the alpha value of a color)
  • Material Colors Palette (like Colors.red[700])

I hope it can make your mobile developer life easier.

Feel free to open pull requests and make contributions.

Link to the repo and documentation.

Top comments (0)