DEV Community

Tanoy Basak
Tanoy Basak

Posted on

Brain.JS -- The intelligence for your frontend app

๐Ÿš€ ๐‹๐จ๐จ๐ค๐ข๐ง๐  ๐ญ๐จ ๐š๐๐ ๐ฌ๐จ๐ฆ๐ž ๐ข๐ง๐ญ๐ž๐ฅ๐ฅ๐ข๐ ๐ž๐ง๐œ๐ž ๐ญ๐จ ๐ฒ๐จ๐ฎ๐ซ ๐Ÿ๐ซ๐จ๐ง๐ญ๐ž๐ง๐ ๐š๐ฉ๐ฉ? ๐ŸŽจ๐Ÿค–

If you've ever struggled to choose the right text color for a dynamic background (we've all been there ๐Ÿ™‹โ€โ™‚๏ธ), hereโ€™s a cool solution using Brain.jsโ€”a simple yet powerful JavaScript library for machine learning right in your browser!

I recently explored Brain.js to solve this very problem: automatically selecting black or white text based on any background color for better readability.

๐Ÿ’ก ๐‡๐จ๐ฐ ๐๐จ๐ž๐ฌ ๐ข๐ญ ๐ฐ๐จ๐ซ๐ค?

Train a neural network with sample background colors and the most suitable text color.

Input new background colors and let Brain.js predict which text color (black or white) offers the best contrast.

Implement this directly into your app to make text always readable, no matter the background!

Hereโ€™s an example prediction: For an orange-ish background color { r: 1, g: 0.4, b: 0 }, Brain.js tells me:

White Text: 99% confidence โœ…

Black Text: 0.2% confidence โŒ

Image description

javascript #machinelearning #webdevelopment #UIUX #brainjs #webdev #frontend #AI #React #DynamicUI

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay