Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors Color schemes. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application.
Blueprint Colors Schemes:
- Sequential color schemes: This color scheme is best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
- Diverging color schemes: This color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.
- Qualitative color schemes: This color scheme uses a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.
Syntax:
<div style={{ backgroundColor: "#2D72D2" }}>...</div>
<h3 style={{ color: "#77450D" }}>...</h3>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: Below example demonstrates the usage of the Sequential Color Scheme.
Javascript
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; function App() { return ( <> <div style={{ padding: 20, textAlign: "center", color: "green" }}> <h1>ReactJS BluePrint Colors Color schemes</h1> </div> <div> <h2 style={{ textAlign: "center", color: "green" }}> Sequential Color Scheme </h2> <div style={{ padding: 20, display: "flex", flexDirection: "row" }}> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#CFF3D2", padding: 20 }}> #CFF3D2 </div> <div style={{ backgroundColor: "#8BCDBC", padding: 20 }}> #8BCDBC </div> <div style={{ backgroundColor: "#59A3AC", padding: 20 }}> #59A3AC </div> <div style={{ backgroundColor: "#3878A1", padding: 20 }}> #3878A1 </div> <div style={{ backgroundColor: "#1F4B99", padding: 20 }}> #1F4B99 </div> </div> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#97F3EB", padding: 20 }}> #CFF3D2 </div> <div style={{ backgroundColor: "#78D5CC", padding: 20 }}> #8BCDBC </div> <div style={{ backgroundColor: "#58B8AE", padding: 20 }}> #59A3AC </div> <div style={{ backgroundColor: "#369C91", padding: 20 }}> #3878A1 </div> <div style={{ backgroundColor: "#008075", padding: 20 }}> #1F4B99 </div> </div> </div> </div> </> ); } export default App; |
Output:
Example 2: Below example demonstrates the usage of the Diverging Color Scheme.
Javascript
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; function App() { return ( <> <div style={{ padding: 20, textAlign: "center", color: "green" }}> <h1>ReactJS BluePrint Colors Color schemes</h1> </div> <div> <h2 style={{ textAlign: "center", color: "green" }}> Diverging Color Scheme </h2> <div style={{ padding: 20, display: "flex", flexDirection: "row" }}> <div style={{ display: 'flex', flexDirection: 'column', paddingRight: 10 }}> <div style={{ backgroundColor: '#1F4B99', padding: 20, color: 'white' }}> #1F4B99 </div> <div style={{ backgroundColor: '#6CACB9', padding: 20, color: 'white' }}> #6CACB9 </div> <div style={{ backgroundColor: '#FFFFFF', padding: 20, color: 'black' }}> #FFFFFF </div> <div style={{ backgroundColor: '#DF9563', padding: 20, color: 'white' }}> #DF9563 </div> <div style={{ backgroundColor: '#9E2B0E', padding: 20, color: 'white' }}> #9E2B0E </div> </div> <div style={{ display: 'flex', flexDirection: 'column', paddingRight: 10 }}> <div style={{ backgroundColor: '#1D7324', padding: 20, color: 'white' }}> #1D7324 </div> <div style={{ backgroundColor: '#8BAE44', padding: 20, color: 'white' }}> #8BAE44 </div> <div style={{ backgroundColor: '#FFE39F', padding: 20, color: 'white' }}> #FFE39F </div> <div style={{ backgroundColor: '#6B9FA1', padding: 20, color: 'white' }}> #6B9FA1 </div> <div style={{ backgroundColor: '#1F4B99', padding: 20, color: 'white' }}> #1F4B99 </div> </div> </div> </div> </> ); } export default App; |
Output:
Example 3: Below example demonstrates the usage of the Qualitative Color Scheme.
Javascript
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; function App() { return ( <> <div style={{ padding: 20, textAlign: "center", color: "green" }}> <h1>ReactJS BluePrint Colors Color schemes</h1> </div> <div> <h2 style={{ textAlign: "center", color: "green" }}> Qualitative Color Scheme </h2> <div style={{ padding: 20, display: "flex", flexDirection: "row" }}> <div style={{ backgroundColor: "#147EB3", padding: 20, color: "white" }} > #147EB3 </div> <div style={{ backgroundColor: "#29A634", padding: 20, color: "white" }} > #147EB3 </div> <div style={{ backgroundColor: "#D1980B", padding: 20, color: "white" }} > #D1980B </div> <div style={{ backgroundColor: "#D33D17", padding: 20, color: "white" }} > #D33D17 </div> <div style={{ backgroundColor: "#9D3F9D", padding: 20, color: "white" }} > #9D3F9D </div> </div> </div> </> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors.color-schemes
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
