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 Sequential 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. The BluePrint sequential color schemes are best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
React.Js BluePrint Colors Sequential Color Schemes:
- Single hue: This sequential color scheme lets the user use only a single type of color using a numerical value.
- Multi hue: This sequential color scheme is used where there is a need to add multi-hue colors using different numerical values.
Syntax:
<div style={{ backgroundColor: "#97F3EB" | "#78D5CC"
| "#58B8AE" | "#369C91" | "#008075" }}>
...
</div>
<div style={{ backgroundColor: "#CFF3D2" | "#8BCDBC"
| "#59A3AC" | "#3878A1" | "#1F4B99" }}>
...
</div>
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 single hue sequential color schemes.
App.js
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 Sequential color schemes </h1> </div> <div> <div style={{ padding: 20, display: "flex", flexDirection: "row" }}> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#FFC940", padding: 20 }}> #FFC940 </div> <div style={{ backgroundColor: "#E9A133", padding: 20 }}> #E9A133 </div> <div style={{ backgroundColor: "#D27B27", padding: 20 }}> #D27B27 </div> <div style={{ backgroundColor: "#B9541A", padding: 20 }}> #B9541A </div> <div style={{ backgroundColor: "#9E2B0E", padding: 20 }}> #9E2B0E </div> </div> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#FFEEC5", padding: 20 }}> #FFEEC5 </div> <div style={{ backgroundColor: "#F1AEA4", padding: 20 }}> #F1AEA4 </div> <div style={{ backgroundColor: "#D37387", padding: 20 }}> #D37387 </div> <div style={{ backgroundColor: "#A3416E", padding: 20 }}> #A3416E </div> <div style={{ backgroundColor: "#5C255C", padding: 20 }}> #5C255C </div> </div> <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: "#E1BAE1", padding: 20 }}> #E1BAE1 </div> <div style={{ backgroundColor: "#DD86AF", padding: 20 }}> #DD86AF </div> <div style={{ backgroundColor: "#C35989", padding: 20 }}> #C35989 </div> <div style={{ backgroundColor: "#98366D", padding: 20 }}> #98366D </div> <div style={{ backgroundColor: "#5C255C", padding: 20 }}> #5C255C </div> </div> </div> </div> </> ); } export default App; |
Output:
Example 2: Below example demonstrates the usage of multi-hue sequential color schemes.
App.js
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 Sequential color schemes </h1> </div> <div> <div style={{ padding: 20, display: "flex", flexDirection: "row" }}> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#FFC940", padding: 20 }}> #FFC940 </div> <div style={{ backgroundColor: "#E9A133", padding: 20 }}> #E9A133 </div> <div style={{ backgroundColor: "#D27B27", padding: 20 }}> #D27B27 </div> <div style={{ backgroundColor: "#B9541A", padding: 20 }}> #B9541A </div> <div style={{ backgroundColor: "#9E2B0E", padding: 20 }}> #9E2B0E </div> </div> <div style={{ padding: 10 }}> <div style={{ backgroundColor: "#FFEEC5", padding: 20 }}> #FFEEC5 </div> <div style={{ backgroundColor: "#F1AEA4", padding: 20 }}> #F1AEA4 </div> <div style={{ backgroundColor: "#D37387", padding: 20 }}> #D37387 </div> <div style={{ backgroundColor: "#A3416E", padding: 20 }}> #A3416E </div> <div style={{ backgroundColor: "#5C255C", padding: 20 }}> #5C255C </div> </div> <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: "#E1BAE1", padding: 20 }}> #E1BAE1 </div> <div style={{ backgroundColor: "#DD86AF", padding: 20 }}> #DD86AF </div> <div style={{ backgroundColor: "#C35989", padding: 20 }}> #C35989 </div> <div style={{ backgroundColor: "#98366D", padding: 20 }}> #98366D </div> <div style={{ backgroundColor: "#5C255C", padding: 20 }}> #5C255C </div> </div> </div> </div> </> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors.sequential-color-schemes
