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

Top comments (0)